Style devices

src/components/device/Device.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let device: any;
+</script>
+
+<div class="card w-96 bg-primary shadow-xl">
+	<div class="card-body">
+		<h2 class="card-title">{device.name} ({device.id})</h2>
+		<p>{device.description}</p>
+		<p>
+			<span>Address: </span>
+			<span>{device.address}</span>
+		</p>
+		<p>
+			<span>Created at: </span>
+			<span>{device.created_at}</span>
+		</p>
+		<p>
+			<span>Active?: </span>
+			<span>{device.is_active}</span>
+		</p>
+	</div>
+</div>

src/components/device/DeviceList.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Device from './Device.svelte';
+
+	export let devices;
+</script>
+
+<h1>Device List</h1>
+
+{#if devices?.length}
+	<div class="m-4">
+		<div class="flex flex-wrap gap-x-4 gap-y-4">
+			{#each devices as device}
+				<Device {device} />
+			{/each}
+		</div>
+	</div>
+{:else}
+	<div>No devices found</div>
+{/if}

src/lib/features/device/getUserDevices.ts

@@ -5,7 +5,7 @@ import type { Database } from '../../shared/supabase/database.types';
 const GetUserDevices = (supabase: SupabaseClient<Database>) => async (owner: string) => {
 	const { data, error } = await supabase.from('device').select().eq('owner', owner);
 
-	handleError(error)
+	handleError(error);
 
 	return data;
 };

src/lib/shared/error/errorHandler.ts

@@ -1,6 +1,6 @@
 export default function handleError(error: unknown | null) {
-    if (!error) {
-        return
-    }
-    console.error(error);
-}
+	if (!error) {
+		return;
+	}
+	console.error(error);
+}

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import { invalidate } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import type { LayoutData } from './$types';
-	import Navbar from '$components/Navbar.svelte';
+	import Navbar from '$components/layout/Navbar.svelte';
 
 	export let data: LayoutData;
 

src/routes/devices/+page.svelte

@@ -1,18 +1,9 @@
 <script lang="ts">
+	import DeviceList from '$components/device/DeviceList.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 	$: ({ devices } = data);
 </script>
 
-<div>WIP: Devices</div>
-
-{#if devices?.length}
-	<ul>
-		{#each devices as device}
-			<li>{device.name}</li>
-		{/each}
-	</ul>
-{:else}
-	<div>No devices found</div>
-{/if}
+<DeviceList {devices} />