53 lines
1.1 KiB
Svelte
53 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
|
|
interface Props extends HTMLButtonAttributes {
|
|
color?: string | null;
|
|
rounded?: 'full' | 'md' | 'lg';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
children: Snippet;
|
|
}
|
|
|
|
let {
|
|
color = null,
|
|
rounded = 'full',
|
|
size = 'md',
|
|
class: className = '',
|
|
children,
|
|
...restProps
|
|
}: Props = $props();
|
|
|
|
const sizeClasses = {
|
|
sm: 'w-8 h-8',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-12 h-12'
|
|
};
|
|
|
|
const roundedClasses = {
|
|
full: 'rounded-full',
|
|
md: 'rounded-md',
|
|
lg: 'rounded-lg'
|
|
};
|
|
|
|
const baseClasses = 'flex items-center justify-center border border-input transition-colors backdrop-blur';
|
|
const sizeClass = sizeClasses[size];
|
|
const roundedClass = roundedClasses[rounded];
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
|
|
class:hover:bg-accent={!color}
|
|
style={color ? `--hover-bg: ${color}20;` : ''}
|
|
{...restProps}
|
|
>
|
|
{@render children()}
|
|
</button>
|
|
|
|
<style>
|
|
button[style*='--hover-bg']:hover {
|
|
background-color: var(--hover-bg);
|
|
}
|
|
</style>
|