Hardware page with more content.

Collapse component

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/components/Collapse.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let title: string = ""
+</script>
+
+<details class="collapse collapse-arrow bg-base-200">
+  <summary class="collapse-title text-xl font-medium">{title}</summary>
+  <div class="collapse-content">
+    <slot />
+  </div>
+</details>

src/components/HardwarePage.svelte

@@ -1,23 +1,44 @@
 <script lang="ts">
   import Select from "./Select.svelte"
-  import { getCollection } from "astro:content"
+  import * as m from "@/paraglide/messages"
+  import Collapse from "@/components/Collapse.svelte"
 
-  getCollection("hardware")
-    .then((collection) => {
-      console.log(collection)
-    })
+  export let hardware: any[] = []
 
-  // TODO fetch selected hardware from content collection
-  let selectedHardware: string = "CPU"
+  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>) {
-    console.log(detail)
-    selectedHardware = detail
+    selectedHardwareKey = detail
   }
 
-  // TODO show the selected hardware
 </script>
-<div>
-  <h2>{selectedHardware}</h2>
-  <Select options={["CPU", "GPU", "RAM"]} on:change={onChange} />
+<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>

src/components/Select.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
 
-  export let options: string[] = []
+  // TODO move to types?
+  interface Option {
+    key: string
+    value: string
+  }
+
+  export let options: Option[] = []
+  // TODO bind data instead of dispatching events
   const dispatch = createEventDispatcher<{ change: string }>()
 </script>
 
 <select
-  class="select select-bordered w-full max-w-xs"
+  class="select select-bordered w-full max-w-xs ${$$restProps.class}"
   on:change={(value) => dispatch("change", value.currentTarget.value)}
 >
-  {#each options as option}
-    <option value={option}>{option}</option>
+  {#each options as { key, value }}
+    <option value={key}>{value}</option>
   {/each}
 </select>