Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
1.2 kB · 43 lines
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344<script lang="ts"> import { buttonVariants, Popover, cn } from '@foxui/core'; import SelectTheme from './SelectTheme.svelte';
let { accentColor = $bindable('pink'), baseColor = $bindable('stone'), selectAccentColor = true, selectBaseColor = true, onchanged }: { accentColor?: string; baseColor?: string; selectAccentColor?: boolean; selectBaseColor?: boolean; onchanged?: (accentColor: string, baseColor: string) => void; } = $props();</script>
<Popover> {#snippet child({ props })} <button {...props} class={cn( buttonVariants({ variant: 'link', size: 'default' }), 'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none' )} > {#if selectAccentColor} <div 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" ></div> {/if}
{#if selectBaseColor} <div class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-linear-to-b" ></div> {/if} </button> {/snippet} <SelectTheme bind:accentColor bind:baseColor {selectAccentColor} {selectBaseColor} {onchanged} /></Popover>