blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-04-30 16:21:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: Button component typing and add background style

Browse source 
Add proper TypeScript discriminated union type to ensure correct HTML
attributes based on whether the component renders as a button or anchor.
Also add bg-sb-primary class to the component's base styles.
This commit is contained in:
Shibo Lyu 2025-04-14 03:41:27 +08:00
parent 35315ca5f3
commit a1f0e4d4bd
1 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/lib/components/Button.svelte
View file

@ -1,28 +1,29 @@
<script lang="ts">
import { tw } from '$lib/tw';
import type { HTMLAttributes } from 'svelte/elements';
interface Props {
type Props = {
variant?: 'primary' | 'secondary';
class?: string | null;
href?: string | null;
class?: string;
children?: import('svelte').Snippet;
[key: string]: unknown;
}
} & (
| ({
href: string;
} & HTMLAttributes<HTMLAnchorElement>)
| ({
href?: undefined;
} & HTMLAttributes<HTMLButtonElement>)
);
let {
variant = 'secondary',
class: className = '',
href = null,
children,
...rest
}: Props = $props();
let { variant = 'secondary', class: className = '', href, children, ...rest }: Props = $props();
</script>
<svelte:element
this={href ? 'a' : 'button'}
{href}
class={tw(
'text-sf-secondary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2.5 py-1 shadow-xs ring-1',
'text-sf-secondary bg-sb-primary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2.5 py-1 shadow-xs ring-1',
'hover:ring-ss-primary font-normal transition-shadow duration-200 active:shadow-inner',
variant === 'primary' && [
'relative text-slate-50 ring-0 duration-200',