47 lines
1.5 KiB
Plaintext
47 lines
1.5 KiB
Plaintext
---
|
|
import type { HTMLAttributes } from "astro/types";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const button = cva(
|
|
cn(
|
|
"inline-flex items-center justify-center rounded-md text-sm font-medium",
|
|
"transition-colors focus-visible:outline-none no-underline",
|
|
"ring-main focus-visible:ring-2 focus-visible:ring-ring",
|
|
"focus-visible:ring-offset-2 disabled:opacity-50",
|
|
"disabled:pointer-events-none ring-offset-background"
|
|
),
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "bg-main text-neutral hocus:bg-main/80",
|
|
primary:
|
|
"bg-primary dark:bg-primary/50 text-neutral dark:text-main hocus:bg-primary/80 dark:hocus:bg-primary/80",
|
|
destructive:
|
|
"bg-error text-destructive-foreground hocus:bg-destructive/90",
|
|
outline:
|
|
"border border-input hover:bg-accent hover:text-accent-foreground",
|
|
secondary: "bg-main/10 text-main hocus:bg-main/20",
|
|
ghost: "hocus:bg-accent hocus:text-accent-foreground",
|
|
link: "underline-offset-4 hocus:underline text-primary",
|
|
},
|
|
size: {
|
|
default: "h-10 text-base py-2 px-4",
|
|
sm: "h-9 px-3 rounded-md",
|
|
lg: "h-14 text-lg px-8 rounded-md",
|
|
},
|
|
},
|
|
}
|
|
);
|
|
|
|
export interface Props
|
|
extends HTMLAttributes<"button">,
|
|
VariantProps<typeof button> {}
|
|
|
|
const { variant = "default", size = "default", ...props } = Astro.props;
|
|
---
|
|
|
|
<button {...props} class={button({ variant, size })}>
|
|
<slot />
|
|
</button>
|