|
|
@@ -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>
|