58 lines
1.8 KiB
Svelte
58 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import type { ClassValue, HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
|
|
|
|
let {
|
|
a,
|
|
color,
|
|
inverted,
|
|
Icon,
|
|
children,
|
|
extra,
|
|
...others
|
|
}: {
|
|
a?: boolean,
|
|
color?: "primary" | "danger" | "success",
|
|
inverted?: boolean,
|
|
Icon?: any,
|
|
extra?: ClassValue,
|
|
children?: any
|
|
} & HTMLButtonAttributes & HTMLAnchorAttributes = $props();
|
|
|
|
const baseClasses = "block flex items-center text-sm px-4 py-2 cursor-pointer rounded transition-all duration-300 ease-in-out";
|
|
|
|
const colors = {
|
|
"normal": {
|
|
"danger": "bg-red-500 hover:bg-red-600 text-white border border-transparent",
|
|
"success": "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent",
|
|
"primary": "bg-neutral-800 hover:bg-neutral-600 text-white border border-transparent",
|
|
},
|
|
"inverted": {
|
|
"danger": "bg-white hover:bg-red-100 text-red-500 border border-red-500",
|
|
"success": "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500",
|
|
"primary": "bg-white hover:bg-neutral-100 text-neutral-800 border border-neutral-800",
|
|
},
|
|
};
|
|
|
|
let colorClasses = $derived(colors[inverted ? "inverted" : "normal"][color ?? "primary"]);
|
|
|
|
let fullClasses = $derived(baseClasses + " " + extra + " " + colorClasses);
|
|
</script>
|
|
|
|
|
|
{#if a}
|
|
<a class={fullClasses} {...others}>
|
|
{#if Icon}
|
|
<Icon class={children ? "mr-2" : ""}></Icon>
|
|
{/if}
|
|
|
|
{@render children?.()}
|
|
</a>
|
|
{:else}
|
|
<button class={fullClasses} {...others}>
|
|
{#if Icon}
|
|
<Icon class={children ? "mr-2" : ""}></Icon>
|
|
{/if}
|
|
|
|
{@render children?.()}
|
|
</button>
|
|
{/if} |