<script lang="ts">

  import Button from '$lib/components/base/button.svelte';

  import Dropdown from '$lib/components/base/dropdown.svelte';

  import DropdownItem from '$lib/components/base/dropdown-item.svelte';

  let open = $state(false);

</script>

<Button onclick={() => (open = true)}>Dropdown</Button>

<Dropdown bind:open>

  <DropdownItem>Dropdown Item 1</DropdownItem>

  <DropdownItem>Dropdown Item 2</DropdownItem>

  <DropdownItem>Dropdown Item 3</DropdownItem>

  <DropdownItem variant="destructive">Destructive</DropdownItem>

  <DropdownItem loading>Requesting...</DropdownItem>

  <DropdownItem disabled>Disabled</DropdownItem>

</Dropdown>

<script lang="ts">

  import Button from '$lib/components/base/button.svelte';

  import Dropdown from '$lib/components/base/dropdown.svelte';

  let openLeft = $state(false);

  let openCenter = $state(false);

  let openRight = $state(false);

</script>

<!-- Left -->

<Button onclick={() => (openLeft = true)}>Left</Button>

<Dropdown placement="left" bind:open={openLeft}>

  <div class="h-56 w-36">Content</div>

</Dropdown>

<!-- Center -->

<Button onclick={() => (openCenter = true)}>Center</Button>

<Dropdown placement="center" bind:open={openCenter}>

  <div class="h-56 w-36">Content</div>

</Dropdown>

<!-- Right -->

<Button onclick={() => (openRight = true)}>Right</Button>

<Dropdown placement="right" bind:open={openRight}>

  <div class="h-56 w-36">Content</div>

</Dropdown>

<script lang="ts">

  import Button from '$lib/components/base/button.svelte';

  import Dropdown from '$lib/components/base/dropdown.svelte';

  import DropdownSwitch from '$lib/components/base/dropdown-switch.svelte';

  import DropdownItem from '$lib/components/base/dropdown-item.svelte';

  import { toggleMode } from 'mode-watcher';

  let open = $state(false);

</script>

<Button onclick={() => (open = true)}>Dropdown</Button>

<Dropdown bind:open>

  <DropdownItem>Settings</DropdownItem>

  <DropdownSwitch label="Dark Mode" onchange={toggleMode} />

  <DropdownSwitch label="Loading" loading />

  <DropdownSwitch label="Loading checked" loading checked />

  <DropdownSwitch label="Disabled" disabled />

  <DropdownSwitch label="Disabled checked" disabled checked />

</Dropdown>