From 8ba480eab167eddba43cb71b44e3be61143d6fb5 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <git@martials.no>
Date: Sun, 6 Oct 2024 14:43:06 +0200
Subject: [PATCH] Hardware page with more content.

Collapse component

Signed-off-by: Martin Berg Alstad <git@martials.no>
---
 messages/en.json                      |  1 +
 messages/nb.json                      |  1 +
 src/components/Collapse.svelte        | 10 ++++++
 src/components/HardwarePage.svelte    | 47 +++++++++++++++++++--------
 src/components/Select.svelte          | 15 ++++++---
 src/content/config.ts                 |  1 +
 src/content/hardware/desktop.yaml     | 23 +++++++++++--
 src/content/hardware/homeServer.yaml  |  1 +
 src/content/hardware/raspberryPi.yaml |  1 +
 src/pages/en/hardware.astro           |  8 ++---
 src/pages/hardware.astro              | 12 ++++---
 src/styles/global.css                 | 20 ++++++++----
 12 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Collapse.svelte

diff --git a/messages/en.json b/messages/en.json
index ee3d65e..3617cc4 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -8,6 +8,7 @@
   "myLinks": "My links",
   "myProjects": "My projects",
   "hardware": "Hardware",
+  "accessories": "Accessories",
   "sourceCode": "Source code",
   "createdAt": "Created at",
   "updatedAt": "Updated at",
diff --git a/messages/nb.json b/messages/nb.json
index c72b71f..e60ee1c 100644
--- a/messages/nb.json
+++ b/messages/nb.json
@@ -8,6 +8,7 @@
   "myLinks": "Mine lenker",
   "myProjects": "Mine prosjekter",
   "hardware": "Maskinvare",
+  "accessories": "Tilbehør",
   "sourceCode": "Kildekode",
   "createdAt": "Opprettet",
   "updatedAt": "Oppdatert",
diff --git a/src/components/Collapse.svelte b/src/components/Collapse.svelte
new file mode 100644
index 0000000..3d4952f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/HardwarePage.svelte b/src/components/HardwarePage.svelte
index 61a19f8..0ca0edb 100644
--- a/src/components/HardwarePage.svelte
+++ b/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>
diff --git a/src/components/Select.svelte b/src/components/Select.svelte
index 3e5a89b..87dc6df 100644
--- a/src/components/Select.svelte
+++ b/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>
diff --git a/src/content/config.ts b/src/content/config.ts
index 7a88edc..6c7a863 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -18,6 +18,7 @@ const projectCollection = defineCollection({
 const hardwareCollection = defineCollection({
   type: "data",
   schema: z.object({
+    title: z.string(),
     accessories: z.optional(z.array(z.string())),
     hardware: z.array(z.string())
   })
diff --git a/src/content/hardware/desktop.yaml b/src/content/hardware/desktop.yaml
index 2fc13b1..5102765 100644
--- a/src/content/hardware/desktop.yaml
+++ b/src/content/hardware/desktop.yaml
@@ -1,4 +1,23 @@
+title: Desktop
 accessories:
-  - a # Screens, keyboards, mice, etc.
+  - Gaming chair | Arozzi Mezzo V2 Gaming chair Fabric Black/Red # https://www.komplett.no/product/1079732?noredirect=true
+  - Headset | Logitech PRO X LIGHTSPEED Wireless Gaming Headset # https://www.komplett.no/product/1162749?noredirect=true
+  - Keyboard | Logitech G710
+  - Monitor 1 | AOC 27" LED FreeSync G2790PX # https://www.komplett.no/product/975642?noredirect=true
+  - Monitor 2 | Asus 28" 4K LED PB287Q # https://www.komplett.no/product/815114?noredirect=true
+  - Mouse | Logitech G502 HERO Gaming Mouse
+  - Mousepad | Svive Styx ESGR Gaming Mousepad XXL # https://www.komplett.no/product/985884?noredirect=true
+  - Speakers | Creative T6 Series II # https://www.komplett.no/product/808450?noredirect=true
 hardware:
-  - b # Graphics cards, CPUs, etc.
\ No newline at end of file
+  - Case | Fractal Design Define R5 (Black) # https://www.fractal-design.com/products/cases/define/define-r5/black/
+  - CPU | Intel Core i5-10600K CPU # https://www.komplett.no/product/1155669?noredirect=true
+  - CPU cooler | Noctua ...
+  - Fans | 4x Fractal Design R3 140mm Silent fan # https://www.komplett.no/product/836971?noredirect=true
+  - GPU | Palit GeForce RTX 2070 SUPER JetStream # https://www.komplett.no/product/1134511?noredirect=true
+  - HDD | Seagate Barracuda 3TB 3.5" # https://www.komplett.no/product/653074?noredirect=true
+  - Motherboard | Gigabyte H470 HD3 # https://www.komplett.no/product/1161192?noredirect=true
+  - Network card | TP-Link Archer TX3000E # https://www.komplett.no/product/1146481?noredirect=true
+  - Ram | 2x Corsair Vengeance LPX DDR4 3200MHz 16GB (black) # https://www.komplett.no/product/893831?noredirect=true
+  - SSD | Samsung 960 PRO 512GB M.2 PCIe SSD # https://www.komplett.no/product/903118?noredirect=true
+  - SSD | Corsair Force Series MP510 960GB M.2 NVMe SSD 960GB # https://www.komplett.no/product/1153863?noredirect=true
+  - PSU | Corsair CX750M, 750W PSU # https://www.komplett.no/product/773377?noredirect=true
diff --git a/src/content/hardware/homeServer.yaml b/src/content/hardware/homeServer.yaml
index d327196..2bf26c8 100644
--- a/src/content/hardware/homeServer.yaml
+++ b/src/content/hardware/homeServer.yaml
@@ -1,2 +1,3 @@
+title: Home Server
 hardware:
   - b # Graphics cards, CPUs, etc.
\ No newline at end of file
diff --git a/src/content/hardware/raspberryPi.yaml b/src/content/hardware/raspberryPi.yaml
index 2fc13b1..3d05ffa 100644
--- a/src/content/hardware/raspberryPi.yaml
+++ b/src/content/hardware/raspberryPi.yaml
@@ -1,3 +1,4 @@
+title: Raspberry Pi 4
 accessories:
   - a # Screens, keyboards, mice, etc.
 hardware:
diff --git a/src/pages/en/hardware.astro b/src/pages/en/hardware.astro
index dc49ed2..74dc711 100644
--- a/src/pages/en/hardware.astro
+++ b/src/pages/en/hardware.astro
@@ -1,10 +1,10 @@
 ---
-import Layout from "../../layouts/Layout.astro"
-import HardwarePage from "../../components/HardwarePage.svelte"
-import "../../styles/global.css"
+import Layout from "@/layouts/Layout.astro"
+import HardwarePage from "@/components/HardwarePage.svelte"
+import "@/styles/global.css"
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
   <h1 class="text-center">Hardware</h1>
   <HardwarePage client:load />
-</Layout>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/hardware.astro b/src/pages/hardware.astro
index 646ed47..7211704 100644
--- a/src/pages/hardware.astro
+++ b/src/pages/hardware.astro
@@ -1,10 +1,12 @@
 ---
-import Layout from "../layouts/Layout.astro"
-import HardwarePage from "../components/HardwarePage.svelte"
-import "../styles/global.css"
+import Layout from "@/layouts/Layout.astro"
+import HardwarePage from "@/components/HardwarePage.svelte"
+import "@/styles/global.css"
+import { getCollection } from "astro:content"
+
+const hardware = await getCollection("hardware")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <h1 class="text-center">Hardware</h1>
-  <HardwarePage client:load />
+  <HardwarePage client:load hardware={hardware} />
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 1f1ad45..ac1d433 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,13 +3,21 @@
 @tailwind utilities;
 
 @layer utilities {
-  .debug {
-    @apply border border-red-500;
-  }
+    .debug {
+        @apply border border-red-500;
+    }
 }
 
 @layer base {
-  h1 {
-    @apply text-4xl font-bold mb-2;
-  }
+    br {
+        @apply my-4;
+    }
+
+    h1 {
+        @apply text-4xl font-bold mb-2;
+    }
+
+    h2 {
+        @apply text-3xl font-bold mb-2;
+    }
 }