Переглянути джерело

feat: add more menu component

Thomas Zhang 3 місяців тому
батько
коміт
67353a89df

+ 3 - 0
src/lib/components/common/more-menu/index.ts

@@ -0,0 +1,3 @@
+import MoreMenu from './menu.svelte';
+
+export { MoreMenu };

+ 31 - 0
src/lib/components/common/more-menu/menu.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Ellipsis, Trash2 } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+
+	import { Button } from '$lib/components/controls/button';
+	import * as DropdownMenu from '$lib/components/controls/dropdown-menu';
+
+	let { ondelete, menu }: { ondelete?: () => void; menu?: Snippet } = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button size="icon-sm" variant="outline" {...props}>
+				<Ellipsis size={14} strokeWidth={2} />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	{#if ondelete}
+		<DropdownMenu.Content align="end">
+			{@render menu?.()}
+			<DropdownMenu.Item
+				class="text-red-400 focus:bg-red-500/10 focus:text-red-400"
+				onclick={() => ondelete()}
+			>
+				<Trash2 size={14} strokeWidth={2} />
+				Delete
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	{/if}
+</DropdownMenu.Root>