FeedbackMenu.svelte 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <script lang="ts">
  2. import { DropdownMenu } from 'bits-ui';
  3. import { flyAndScale } from '$lib/utils/transitions';
  4. import { getContext, createEventDispatcher } from 'svelte';
  5. import fileSaver from 'file-saver';
  6. const { saveAs } = fileSaver;
  7. const dispatch = createEventDispatcher();
  8. const i18n = getContext('i18n');
  9. import Dropdown from '$lib/components/common/Dropdown.svelte';
  10. import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
  11. import Pencil from '$lib/components/icons/Pencil.svelte';
  12. import Tooltip from '$lib/components/common/Tooltip.svelte';
  13. import Download from '$lib/components/icons/Download.svelte';
  14. let show = false;
  15. </script>
  16. <Dropdown bind:show on:change={(e) => {}}>
  17. <Tooltip content={$i18n.t('More')}>
  18. <slot />
  19. </Tooltip>
  20. <div slot="content">
  21. <DropdownMenu.Content
  22. class="w-full max-w-[150px] rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
  23. sideOffset={-2}
  24. side="bottom"
  25. align="start"
  26. transition={flyAndScale}
  27. >
  28. <DropdownMenu.Item
  29. class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
  30. on:click={() => {
  31. dispatch('delete');
  32. show = false;
  33. }}
  34. >
  35. <GarbageBin strokeWidth="2" />
  36. <div class="flex items-center">{$i18n.t('Delete')}</div>
  37. </DropdownMenu.Item>
  38. </DropdownMenu.Content>
  39. </div>
  40. </Dropdown>