martials.no/src/components/HardwarePage.svelte

<script lang="ts">
  import Select from "./Select.svelte"
  import { getCollection } from "astro:content"

  getCollection("hardware")
    .then((collection) => {
      console.log(collection)
    })

  // TODO fetch selected hardware from content collection
  let selectedHardware: string = "CPU"

  function onChange({ detail }: CustomEvent<string>) {
    console.log(detail)
    selectedHardware = detail
  }

  // TODO show the selected hardware
</script>
<div>
  <h2>{selectedHardware}</h2>
  <Select options={["CPU", "GPU", "RAM"]} on:change={onChange} />
</div>