mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-05 17:33:31 -04:00
40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
interface Props {
|
|
children: Snippet;
|
|
variant?: "primary" | "google" | "apple" | "secondary" | "danger";
|
|
onclick?: () => void;
|
|
class?: string;
|
|
type?: "button" | "submit" | "reset";
|
|
}
|
|
|
|
let {
|
|
children,
|
|
variant = "primary",
|
|
onclick,
|
|
class: className = "",
|
|
type = "button",
|
|
}: Props = $props();
|
|
|
|
const variantClasses = {
|
|
primary:
|
|
"bg-blue-500 hover:bg-blue-600 text-white border-gray-500 shadow-md hover:shadow-lg",
|
|
google: "bg-white hover:bg-gray-50 text-gray-700 border-gray-500 shadow-md hover:shadow-lg",
|
|
apple: "bg-black hover:bg-gray-900 text-white border-gray-500 shadow-md hover:shadow-lg",
|
|
secondary:
|
|
"bg-white/50 hover:bg-white/70 text-gray-700 border-gray-500 shadow-sm hover:shadow-md backdrop-blur-sm",
|
|
danger: "bg-red-500 hover:bg-red-600 text-white border-gray-500 shadow-md hover:shadow-lg",
|
|
};
|
|
</script>
|
|
|
|
<button
|
|
{type}
|
|
{onclick}
|
|
class="inline-flex items-center justify-center px-4 py-2 rounded-lg border-2 font-bold text-sm transition-all duration-200 {variantClasses[
|
|
variant
|
|
]} {className}"
|
|
>
|
|
{@render children()}
|
|
</button>
|