src/lib/components/search/Select.svelte

<script lang="ts">
  import Icon from '@iconify/svelte';
  import { clickoutside } from '@svelte-put/clickoutside';

  import { NAMESPACES } from '$lib/datas/namespaces';
  
  export let namespace: 'spaces' | 'models' | 'datasets';
  export let onSelect: (name: 'spaces' | 'models' | 'datasets') => void;
  let dropdown_is_open = false;


  const handleSelect = (name: string) => {
    onSelect(name.toLowerCase() as 'spaces' | 'models' | 'datasets');
    dropdown_is_open = false;
  }
</script>

<button
  class="h-full w-full max-w-[200px] border-r-2 border-zinc-200/80 dark:border-zinc-800 transition-all duration-200 cursor-pointer flex items-center justify-center relative"
  use:clickoutside on:clickoutside={() => dropdown_is_open = false}
  on:click={() => dropdown_is_open = !dropdown_is_open}
>
  <div class="flex items-center justify-between text-zinc-500 dark:text-zinc-300 transition-all duration-200 w-full pr-5">
    {#if namespace}
      <div class="flex items-center justify-start gap-3 capitalize text-zinc-800 dark:text-zinc-200 transition-all duration-200">
        <svelte:component this={NAMESPACES.find(ns => ns.name.toLowerCase() === namespace)?.icon} size="24px" />
        {namespace}
      </div>
      {:else}
      Select a namespace
    {/if}
    <div class:rotate-180={!dropdown_is_open} class="transition-all duration-200">
      <Icon icon="ep:arrow-up-bold" class="w-3 h-3 inline-block" />
    </div>
  </div>
  <ul
    class="bg-white dark:bg-zinc-900 shadow-sm rounded-b-2xl absolute bottom-0 left-0 w-full translate-y-full text-left px-2 pb-2 grid grid-cols-1 gap-1 transition-all duration-200 z-20"
    class:pointer-events-none={!dropdown_is_open}
    class:opacity-0={!dropdown_is_open}
  >
    {#each NAMESPACES as ns }
      <button
        class="flex items-center justify-start gap-4 text-zinc-700 dark:text-zinc-300 transition-all duration-200 font-medium rounded-lg px-3 py-2.5 cursor-pointer"
        class:hover:bg-zinc-100={!ns.wip}
        class:dark:hover:bg-zinc-800={!ns.wip}
        class:cursor-not-allowed={ns.wip}
        on:click={(e) => {
          if (ns.wip) return;
          e.preventDefault();
          e.stopPropagation();
          handleSelect(ns.name)
        }}
      >
        <svelte:component this={ns.icon} size="24px" />
        {ns.name}
        {#if ns.wip}
          <span class="text-xs bg-yellow-50 text-yellow-500 font-semibold font-title rounded-full px-2 py-1.5">WIP</span>
        {/if}
      </button>
    {/each}
  </ul>
</button>