bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3 import type { HTMLButtonAttributes } from 'svelte/elements'
4
5 const sizes = {
6 sm: 'px-2.5 py-1',
7 md: 'py-1.5 px-3.5',
8 }
9
10 interface Props extends HTMLButtonAttributes {
11 selected?: boolean
12 children: Snippet
13 size?: keyof typeof sizes
14 element?: 'div' | 'a' | 'button'
15 [key: string]: any
16 }
17
18 let {
19 selected = false,
20 onselect,
21 disabled,
22 children,
23 href,
24 size = 'sm',
25 element = href ? 'a' : 'button',
26 ...rest
27 }: Props = $props()
28</script>
29
30<svelte:element
31 this={element}
32 class={[
33 sizes[size],
34 'tab-button',
35 selected ? 'btn-primary' : 'btn-secondary',
36 ]}
37 onclick={href ? undefined : onselect}
38 {disabled}
39 {href}
40 {...rest}
41>
42 {@render children?.()}
43</svelte:element>
44
45<style>
46 @reference '../../../app.css';
47
48 .tab-button {
49 font-size: var(--text-sm);
50 border-radius: var(--radius-xl);
51 font-weight: var(--font-weight-medium);
52 transition: all 75ms var(--default-transition-timing-function);
53 position: relative;
54 box-shadow: var(--shadow-xs);
55 cursor: pointer;
56 }
57</style>