your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { buttonVariants, Popover, cn } from '@foxui/core';
3 import SelectTheme from './SelectTheme.svelte';
4
5 let {
6 accentColor = $bindable('pink'),
7 baseColor = $bindable('stone'),
8 selectAccentColor = true,
9 selectBaseColor = true,
10 onchanged
11 }: {
12 accentColor?: string;
13 baseColor?: string;
14 selectAccentColor?: boolean;
15 selectBaseColor?: boolean;
16 onchanged?: (accentColor: string, baseColor: string) => void;
17 } = $props();
18</script>
19
20<Popover>
21 {#snippet child({ props })}
22 <button
23 {...props}
24 class={cn(
25 buttonVariants({ variant: 'link', size: 'default' }),
26 'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none'
27 )}
28 >
29 {#if selectAccentColor}
30 <div
31 class=" from-accent-500 to-accent-600 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border bg-linear-to-b"
32 ></div>
33 {/if}
34
35 {#if selectBaseColor}
36 <div
37 class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-linear-to-b"
38 ></div>
39 {/if}
40 </button>
41 {/snippet}
42 <SelectTheme bind:accentColor bind:baseColor {selectAccentColor} {selectBaseColor} {onchanged} />
43</Popover>