Select Tabs

<script lang="ts">
  import * as Select from '@odbd/svelte/select'
  import { createListCollection } from '@odbd/svelte/select'
  import * as Tabs from '@odbd/svelte/tabs'

  const groups = [
    {
      value: 'orders',
      label: '주문',
      tabs: [
        { value: 'overview', label: '요약', body: '진행 중인 주문과 지연 위험을 함께 확인해요.' },
        {
          value: 'queue',
          label: '큐',
          body: '검수 대기, 포장 대기, 출고 대기를 단계별로 확인해요.',
        },
        { value: 'history', label: '기록', body: '최근 처리 내역과 담당자 변경을 추적해요.' },
      ],
    },
    {
      value: 'members',
      label: '멤버',
      tabs: [
        { value: 'overview', label: '요약', body: '활성 멤버와 초대 대기 상태를 확인해요.' },
        { value: 'queue', label: '권한', body: '역할별 접근 범위와 승인 요청을 검토해요.' },
        {
          value: 'history',
          label: '기록',
          body: '멤버 초대, 비활성화, 권한 변경 내역을 확인해요.',
        },
      ],
    },
    {
      value: 'billing',
      label: '정산',
      tabs: [
        { value: 'overview', label: '요약', body: '이번 달 청구 금액과 미결 항목을 요약해요.' },
        {
          value: 'queue',
          label: '검토',
          body: '확인이 필요한 세금계산서와 보류 건을 한곳에 모아요.',
        },
        { value: 'history', label: '기록', body: '결제, 환불, 조정 내역을 시간순으로 확인해요.' },
      ],
    },
  ]

  const collection = createListCollection({
    items: groups,
    itemToString: (item) => item.label,
    itemToValue: (item) => item.value,
  })

  let selectedGroup = $state(['orders'])
  const activeGroup = $derived(
    groups.find((group) => group.value === selectedGroup[0]) ?? groups[0],
  )

  const updateGroup = (details: { value: string[] }) => {
    selectedGroup = details.value
  }
</script>

<div class="examples-select-tabs">
  <Select.Root {collection} value={selectedGroup} onValueChange={updateGroup}>
    <Select.Label>업무 범주</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="범주를 선택하세요" />
        <Select.Indicator>▾</Select.Indicator>
      </Select.Trigger>
    </Select.Control>
    <Select.Positioner>
      <Select.Content>
        {#each collection.items as item}
          <Select.Item {item}>
            <Select.ItemText>{item.label}</Select.ItemText>
            <Select.ItemIndicator>✓</Select.ItemIndicator>
          </Select.Item>
        {/each}
      </Select.Content>
    </Select.Positioner>
    <Select.HiddenSelect />
  </Select.Root>

  {#key activeGroup.value}
    <Tabs.Root defaultValue="overview" class="examples-select-tabs__tabs">
      <Tabs.List>
        {#each activeGroup.tabs as tab}
          <Tabs.Trigger value={tab.value}>{tab.label}</Tabs.Trigger>
        {/each}
      </Tabs.List>
      {#each activeGroup.tabs as tab}
        <Tabs.Content value={tab.value}>
          <div class="examples-select-tabs__panel">{tab.body}</div>
        </Tabs.Content>
      {/each}
    </Tabs.Root>
  {/key}
</div>