44 lines
1.3 KiB
Plaintext
44 lines
1.3 KiB
Plaintext
---
|
|
interface Props {
|
|
badge?: string
|
|
url?: string
|
|
label?: string
|
|
}
|
|
const { badge, url, name } = Astro.props
|
|
---
|
|
<a href={url} aria-label={name}>
|
|
<button
|
|
class:list={`
|
|
w-full
|
|
h-10
|
|
rounded-lg
|
|
bg-none
|
|
hover:bg-[var(--btn-plain-bg-hover)]
|
|
active:bg-[var(--btn-plain-bg-active)]
|
|
transition-all
|
|
pl-2
|
|
hover:pl-3
|
|
|
|
text-neutral-700
|
|
hover:text-[var(--primary)]
|
|
dark:text-neutral-300
|
|
dark:hover:text-[var(--primary)]
|
|
`
|
|
}
|
|
>
|
|
<div class="flex items-center justify-between relative mr-2">
|
|
<div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis ">
|
|
<slot></slot>
|
|
</div>
|
|
{ badge !== undefined && badge !== null && badge !== '' &&
|
|
<div class="transition h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
|
|
text-[var(--btn-content)] dark:text-[var(--deep-text)]
|
|
bg-[oklch(0.95_0.025_var(--hue))] dark:bg-[var(--primary)]
|
|
flex items-center justify-center">
|
|
{ badge }
|
|
</div>
|
|
}
|
|
</div>
|
|
</button>
|
|
</a>
|