www/src/components/Button.astro

71 lines
1.6 KiB
Text

---
import { getLocale, getPath } from '~/utils/i18n'
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
class: className,
isPrimary,
isAlert,
isBordered,
href,
id,
extra,
localePath = true,
...props
} = Astro.props
---
{
href ? (
<a
id={id}
{...extra}
href={localePath ? getLocalePath(href) : href}
class:list={[
'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02] active:scale-[0.98]',
className,
isPrimary
? 'border-dark bg-dark text-paper shadow-lg'
: isAlert
? 'bg-red-300 text-dark'
: !isBordered
? 'bg-subtle'
: '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
]}
{...props}
>
<slot />
</a>
) : (
<button
id={id}
{...extra}
class:list={[
'transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]',
className,
isPrimary
? 'border-dark bg-dark text-paper shadow-md'
: isAlert
? 'bg-red-300 text-dark'
: !isBordered
? ''
: '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
]}
{...props}
>
<slot />
</button>
)
}
<style>
button,
a {
font-size: 0.9rem;
&[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
}
</style>