martials.no/src/components/HardwarePage.svelte

<script lang="ts">
  import Select from "./Select.svelte"
  import * as m from "@/paraglide/messages"
  import Collapse from "@/components/Collapse.svelte"

  export let hardware: any[] = []

  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)!

  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 />

  <Collapse title={m.hardware()}>
    <ul>
      {#each selectedHardware.data.hardware as item}
        <li class="list-disc ml-5">{item}</li>
      {/each}
    </ul>
  </Collapse>
  {#if (selectedHardware.data.accessories)}
    <Collapse title={m.accessories()}>
      <ul>
        {#each selectedHardware.data.accessories as item}
          <li class="list-disc ml-5">{item}</li>
        {/each}
      </ul>
    </Collapse>
  {/if}
</div>