Dropdown

<script>
  import Dropdown from '$lib/components/Dropdown.svelte';
</script>

<!-- Basic dropdown -->
<Dropdown label="Options menu">
  <button class="w-full text-left px-4 py-2 text-sm text-white hover:bg-neutral-800">
    Edit
  </button>
  <button class="w-full text-left px-4 py-2 text-sm text-white hover:bg-neutral-800">
    Duplicate
  </button>
  <button class="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-neutral-800">
    Delete
  </button>
</Dropdown>

<!-- Custom trigger -->
<Dropdown label="User menu" placement="bottom-end">
  <svelte:fragment slot="trigger" let:toggle let:open>
    <button
      onclick={toggle}
      class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-neutral-800"
    >
      <span>Profile</span>
      <svg
        class="w-4 h-4 transition-transform {open ? 'rotate-180' : ''}"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
  </svelte:fragment>

  <button class="w-full text-left px-4 py-2 text-sm text-white hover:bg-neutral-800">
    Settings
  </button>
  <button class="w-full text-left px-4 py-2 text-sm text-white hover:bg-neutral-800">
    Sign out
  </button>
</Dropdown>