feat: Implement initial authentication pages and a MapLibre GL map component with TanStack Router setup.

src/routes/__root.tsx

@@ -5,7 +5,7 @@ import {
 	Scripts
 } from "@tanstack/react-router"
 import { Devtools } from "@/integrations/devtools"
-import { getLocale } from "@/integrations/paraglide/runtime"
+import { getLocale } from "@/paraglide/runtime"
 import appCss from "@/styles/globals.css?url"
 import Header from "../components/Header"
 

src/routes/auth/dashboard.tsx

@@ -0,0 +1,79 @@
+import { Card } from "@heroui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { Drone } from "lucide-react"
+import { useState } from "react"
+import {
+	Map as MapComponent,
+	MapMarker,
+	MapViewport,
+	MarkerContent,
+	MarkerPopup,
+	MarkerTooltip
+} from "@/components/maps/map"
+
+export const Route = createFileRoute("/auth/dashboard")({
+	component: RouteComponent
+})
+
+function RouteComponent() {
+	const locations = [
+		{
+			id: 1,
+			name: "Location 1",
+			lat: 40.76,
+			lng: -73.98
+		},
+		{
+			id: 2,
+			name: "Location 2",
+			lat: 40.77,
+			lng: -73.99
+		},
+		{
+			id: 3,
+			name: "Location 3",
+			lat: 40.5874827,
+			lng: -1.7925343
+		}
+	]
+	const [viewport, setViewport] = useState<MapViewport>({
+		center: [40.5874827, -1.7925343],
+		zoom: 8,
+		bearing: 0,
+		pitch: 0
+	})
+	return (
+		<div>
+			<Card className="h-[800px] p-0 overflow-hidden">
+				<MapComponent
+					center={[40.5874827, -1.7925343]}
+					zoom={10}
+					viewport={viewport}
+					onViewportChange={setViewport}
+				>
+					{locations.map((location) => (
+						<MapMarker
+							key={location.id}
+							longitude={location.lng}
+							latitude={location.lat}
+						>
+							<MarkerContent>
+								<Drone size={24} color="green" className="text-green-200" />
+								{/* <div className="size-5 rounded-full bg-rose-500 border-2 border-white shadow-lg cursor-pointer hover:scale-110 transition-transform" /> */}
+							</MarkerContent>
+							<MarkerTooltip>{location.name}</MarkerTooltip>
+							<MarkerPopup>
+								<div className="space-y-1">
+									<p className="font-medium text-foreground">{location.name}</p>
+									<p className="text-xs text-muted-foreground">
+										{location.lat.toFixed(4)}, {location.lng.toFixed(4)}
+									</p>
+								</div>
+							</MarkerPopup>
+						</MapMarker>
+					))}
+				</MapComponent>
+			</Card>
+		</div>
+	)
+}

src/routes/login/route.tsx

@@ -4,13 +4,13 @@ import { LogIn } from "lucide-react"
 import { useState } from "react"
 
 export const Route = createFileRoute("/login")({
-	component: RouteComponent,
+	component: RouteComponent
 })
 
 function RouteComponent() {
 	const [values, setValues] = useState({
 		email: "",
-		password: "",
+		password: ""
 	})
 	return (
 		<div className="grid-cols-2 grid min-h-screen">
@@ -88,7 +88,7 @@ function RouteComponent() {
 										height="16"
 										viewBox="0 0 16 16"
 									>
-										<g fill="none" fill-rule="evenodd" clip-rule="evenodd">
+										<g fill="none" fillRule="evenodd" clipRule="evenodd">
 											<path
 												fill="#f44336"
 												d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"