bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3
4 interface Props {
5 orientation: 'horizontal'
6 class?: string
7 children?: Snippet
8 }
9
10 let {
11 orientation = 'horizontal',
12 children,
13 class: clazz,
14 ...rest
15 }: Props = $props()
16</script>
17
18<div
19 {...rest}
20 role="group"
21 class={[
22 'btn-group',
23 orientation == 'horizontal' ? 'btn-group-horizontal' : 'btn-group-vertical',
24 clazz,
25 ]}
26>
27 {@render children?.()}
28</div>
29
30<style>
31 .btn-group {
32 gap: var(--spacing);
33 flex-shrink: 0;
34 }
35
36 .btn-group.btn-group-horizontal {
37 flex-direction: row;
38 }
39
40 .btn-group.btn-group-horizontal :global {
41 & > button,
42 & > a {
43 position: relative;
44 border-radius: 8px !important;
45
46 &:first-child {
47 border-radius: 24px 12px 12px 24px !important;
48 }
49
50 &:last-child {
51 border-radius: 12px 24px 24px 12px !important;
52 }
53 }
54 }
55</style>