ui: add buttons to Zone table

apps/front/src/lib/client/components/toggle.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let initialValue: boolean = false;
+
+	let enabled: boolean = initialValue;
+
+	const toggleSwitch = (): void => {
+		enabled = !enabled;
+	};
+</script>
+
+<button
+	type="button"
+	class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+	class:bg-indigo-600={enabled}
+	class:bg-gray-200={!enabled}
+	role="switch"
+	aria-checked={enabled}
+	on:click={toggleSwitch}
+>
+	<span
+		aria-hidden="true"
+		class="pointer-events-none inline-block rounded-full h-5 w-5 transform bg-white shadow ring-0 transition duration-200 ease-in-out"
+		class:translate-x-5={enabled}
+		class:translate-x-0={!enabled}
+	></span>
+</button>

apps/front/src/routes/map/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Map from '$lib/client/components/map.svelte';
 	import Table from '$lib/client/components/table.svelte';
+	import ToggleSwitch from '$lib/client/components/toggle.svelte';
 	import {
 		IconArrowUturnLeft,
 		IconArrowUturnRight,
@@ -8,6 +9,8 @@
 		IconCursorArrowRays,
 		IconXMark
 	} from '../../lib/client/components/icons';
+
+	let initialValueForSwitch: boolean = true;
 </script>
 
 <section class="space-y-4 lg:space-y-8">
@@ -56,6 +59,9 @@
 							<th class="text-right" scope="col">Gateways</th>
 							<th class="text-right" scope="col">Lamps</th>
 							<th class="text-right" scope="col">Sensors</th>
+							<th class="text-center" scope="col">Schedule</th>
+							<th class="text-right" scope="col">On/Off</th>
+							<th class="text-right" scope="col">Actions</th>
 						</tr>
 					</thead>
 					<tbody class="divide-y divide-gray-200 bg-white">
@@ -67,6 +73,16 @@
 								<td class="text-right">12</td>
 								<td class="text-right"> 20 </td>
 								<td class="text-right">40</td>
+								<td class="text-center"> <a href="/" class="text-purple-800">View</a></td>
+								<td class="text-right">
+									<ToggleSwitch {initialValueForSwitch} />
+								</td>
+								<td class="text-right">
+									<div class="flex gap-4 items-center justify-end">
+										<a href="/" class="text-purple-800">Edit</a>
+										<a href="/" class="text-red-600">Delete</a>
+									</div>
+								</td>
 							</tr>
 						{/each}
 						<!-- More transactions... -->