📦️ Updated Tailwind to v4, updated hardware to uses

src/components/UsesPage.svelte

@@ -3,30 +3,31 @@
   import * as m from "@/paraglide/messages"
   import CollapseList from "@/components/collapse/CollapseList.svelte"
 
-  export let hardware: any[] = []
+  export let uses: any[] = []
 
-  const hardwareOptions = hardware.map((item) => ({
+  const hardwareOptions = uses.map((item) => ({
     key: item.id,
     value: item.data.title
   }))
 
-  let selectedHardwareKey: string = hardware[0].id
-  $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
+  let selectedHardwareKey: string = uses[0].id
+  $: selectedHardware = uses.find((item) => item.id === selectedHardwareKey)!
 
   // TODO bind to component
+  // TODO onChange not called
   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>
+  <h1 class="text-center">{m.uses()}</h1>
   <div>
     <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
   </div>
   <br />
 
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
+  <CollapseList items={selectedHardware.data.hardware} title={m.uses()} />
   <div class="my-2"></div>
   {#if (selectedHardware.data.accessories)}
     <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />