ui: add buttons to the map draw

apps/front/src/app.css

@@ -4,7 +4,10 @@
 
 @layer components {
 	.btn {
-		@apply flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+		@apply cursor-pointer flex items-center gap-2 
+		rounded-md px-3 py-2 
+		text-sm font-semibold text-white shadow-sm 
+		focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
 	}
 
 	.btn-primary {

apps/front/src/lib/client/components/icons/arrowUturnLeft.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"
+	/>
+</svg>

apps/front/src/lib/client/components/icons/arrowUturnRight.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3"
+	/>
+</svg>

apps/front/src/lib/client/components/icons/check.svelte

@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+</svg>

apps/front/src/lib/client/components/icons/cursorArrowRays.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"
+	/>
+</svg>

apps/front/src/lib/client/components/icons/index.ts

@@ -1,11 +1,16 @@
+export { default as IconArrowUturnLeft } from './arrowUturnLeft.svelte';
+export { default as IconArrowUturnRight } from './arrowUturnRight.svelte';
 export { default as IconBell } from './bell.svelte';
 export { default as IconBuildingOffice2 } from './buildingOffice2.svelte';
 export { default as IconBulb } from './bulb.svelte';
 export { default as IconChartPie } from './chartPie.svelte';
+export { default as IconCheck } from './check.svelte';
 export { default as IconCog6Tooth } from './cog6tooth.svelte';
 export { default as IconCpuChip } from './cpuChip.svelte';
+export { default as IconCursorArrowRays } from './cursorArrowRays.svelte';
 export { default as IconExclamationTriangle } from './exclamationTriangle.svelte';
 export { default as IconHome } from './home.svelte';
 export { default as IconMap } from './map.svelte';
 export { default as IconUser } from './user.svelte';
 export { default as IconUsers } from './users.svelte';
+export { default as IconXMark } from './xMark.svelte';

apps/front/src/lib/client/components/icons/xMark.svelte

@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

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

@@ -109,7 +109,7 @@
 				<span
 					class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"
 				>
-					<IconBulb size="4" />
+					<IconBulb class="size-4" />
 					<span
 						class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
 					></span>
@@ -119,7 +119,7 @@
 				<span
 					class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"
 				>
-					<IconBulb size="4" />
+					<IconBulb class="size-4" />
 					<span
 						class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
 					></span>

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

@@ -1,11 +1,48 @@
 <script lang="ts">
 	import Map from '$lib/client/components/map.svelte';
 	import Table from '$lib/client/components/table.svelte';
+	import {
+		IconArrowUturnLeft,
+		IconArrowUturnRight,
+		IconCheck,
+		IconCursorArrowRays,
+		IconXMark
+	} from '../../lib/client/components/icons';
 </script>
 
 <section class="space-y-4 lg:space-y-8">
-	<div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white">
+	<div class="flex relative overflow-hidden rounded-xl border border-gray-200 bg-white">
 		<Map />
+
+		<div class="top-2 absolute bg-white block right-2 rounded-xl shadow z-10">
+			<div class="flex flex-col gap-4 p-2">
+				<div class="flex flex-col gap-0.5">
+					<button type="button" class="btn btn-primary">
+						<IconArrowUturnLeft />
+					</button>
+
+					<button type="button" class="btn btn-primary"><IconArrowUturnRight /></button>
+				</div>
+
+				<button type="button" class="btn btn-primary"><IconCursorArrowRays /></button>
+
+				<div class="flex-col gap-0.5 hidden">
+					<button type="button" class="btn btn-primary"><IconCheck /></button>
+					<button type="button" class="btn btn-primary">
+						<IconXMark />
+					</button>
+				</div>
+
+				<div class="flex flex-col gap-0.5">
+					<button type="button" class="btn btn-primary">
+						<span class="size-6 border-2 border-white rounded block"></span>
+					</button>
+					<button type="button" class="btn btn-primary">
+						<span class="size-6 border-2 border-white rounded-full block"></span>
+					</button>
+				</div>
+			</div>
+		</div>
 	</div>
 	<div class="mx-auto max-w-6xl">
 		<div class="flex flex-col">