martials.no/src/components/HardwarePage.svelte

<script lang="ts">
  import Select from "./Select.svelte"
  import * as m from "@/paraglide/messages"
  import CollapseList from "@/components/collapse/CollapseList.svelte"
  import type { CollectionEntry } from "astro:content"

  export let hardware: CollectionEntry<"hardware">[] = []

  const hardwareOptions = hardware.map((item) => ({
    key: item.id,
    value: item.data.title
  }))

  let selectedHardwareKey: string = hardware[0].id
  $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!

  // TODO bind to component
  function onChange({ detail }: CustomEvent<string>) {
    selectedHardwareKey = detail
  }

</script>
<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
  <h1 class="text-center">{m.hardware()}</h1>
  <div>
    <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
  </div>
  <br />

  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
  <div class="my-2" />
  {#if (selectedHardware.data.accessories)}
    <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
  {/if}
</div>