Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const dropdownItem = tv({ base: "w-full justify-start rounded-none p-2 text-left focus-visible:-outline-offset-2", variants: { danger: { false: "", true: "text-foreground-danger" } }, defaultVariants: { danger: false } });
export type DropdownItemVariants = VariantProps<typeof dropdownItem>;</script>
<script lang="ts"> import { resolve } from "$app/paths"; import type { Component, Snippet } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { getContext } from "svelte"; import Button, { type ButtonVariants } from "./Button.svelte";
interface Props { href?: string; icon?: Component<SvelteHTMLElements["svg"]>; danger?: DropdownItemVariants["danger"]; onclick?: (event: MouseEvent) => void; /** Button hugs its children, so a two-column row needs `[&>span]:w-full` here. */ class?: string; children: Snippet; size?: ButtonVariants["size"]; }
let { href, icon, danger = false, onclick, class: className, children, size }: Props = $props(); const classes = $derived(dropdownItem({ danger, class: className }));
const closeDropdown = getContext<(() => void) | undefined>("dropdown-close"); const registerItem = getContext<((el: HTMLElement) => () => void) | undefined>( "dropdown-register" );
let el = $state<HTMLAnchorElement | HTMLButtonElement>();
$effect(() => { if (!el || !registerItem) return; return registerItem(el); });
const handleClick = (event: MouseEvent) => { closeDropdown?.(); onclick?.(event); };</script>
<Button bind:ref={el} variant="ghost" href={href ? resolve(href as "/") : undefined} class={classes} {icon} role="menuitem" tabindex={-1} onclick={handleClick} {size}> {@render children()}</Button>