src/components/common/ButtonLink.astro

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