alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from 'tailwind-variants';
3
4 export const dropdownItem = tv({
5 base: 'flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-[0.7rem] py-[0.55rem] text-left text-inherit no-underline transition-colors duration-150 hover:no-underline',
6 variants: {
7 danger: {
8 false: 'hover:bg-surface-hover dark:hover:bg-[rgb(55_65_81_/_0.5)]',
9 true: 'text-danger hover:bg-danger-soft'
10 }
11 },
12 defaultVariants: {
13 danger: false
14 }
15 });
16
17 export type DropdownItemVariants = VariantProps<typeof dropdownItem>;
18</script>
19
20<script lang="ts">
21 import { resolve } from '$app/paths';
22 import type { Component, Snippet } from 'svelte';
23 import type { SvelteHTMLElements } from 'svelte/elements';
24 import { getContext } from 'svelte';
25 interface Props {
26 href?: string;
27 icon?: Component<SvelteHTMLElements['svg']>;
28 danger?: DropdownItemVariants['danger'];
29 onclick?: (event: MouseEvent) => void;
30 children: Snippet;
31 }
32
33 let { href, icon, danger = false, onclick, children }: Props = $props();
34 const classes = $derived(dropdownItem({ danger }));
35
36 const closeDropdown = getContext<(() => void) | undefined>('dropdown-close');
37
38 const handleClick = (event: MouseEvent) => {
39 closeDropdown?.();
40 onclick?.(event);
41 };
42</script>
43
44{#if href}
45 <a href={resolve(href as '/')} class={classes} onclick={handleClick}>
46 {#if icon}
47 {@const Glyph = icon}
48 <Glyph class="size-4" aria-hidden="true" />
49 {/if}
50 {@render children()}
51 </a>
52{:else}
53 <button type="button" class={classes} onclick={handleClick}>
54 {#if icon}
55 {@const Glyph = icon}
56 <Glyph class="size-4" aria-hidden="true" />
57 {/if}
58 {@render children()}
59 </button>
60{/if}