Add routing 🧭

package.json

@@ -14,6 +14,7 @@
     "@tsconfig/svelte": "^5.0.0",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.6",
+    "svelte-routing": "^2.5.0",
     "tslib": "^2.6.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"

src/App.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-   import Datepicker from './lib/Datepicker.svelte';
-
-   let pickedDate: Date;
+   import { Link, Route, Router } from 'svelte-routing';
+   import Calendar from './routes/calendar/Calendar.svelte';
+   import LostAndFound from './routes/lost-and-found/LostAndFound.svelte';
 </script>
 
-<main>
-   <p>{pickedDate}</p>
-   <Datepicker bind:date={pickedDate} />
-</main>
+<Router>
+   <nav>
+      <Link to="/">Calendar</Link>
+      <Link to="/lost-and-found">Blog</Link>
+   </nav>
+   <main>
+      <Route path="/lost-and-found" component={LostAndFound} />
+      <Route path="/"><Calendar /></Route>
+   </main>
+</Router>

src/model/reservation.model.ts

@@ -0,0 +1,8 @@
+export interface Reservation {
+   id: string;
+   owner: string;
+   startTime: number; //timestamp
+   endTime: number; //timestamp
+}
+
+export type ReservationStoreData = Reservation[] | null;

src/model/reservation.store.ts

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store';
+import type { Reservation, ReservationStoreData } from './reservation.model';
+
+const mockedReservations: Reservation[] = [
+   {
+      id: '1',
+      owner: '1',
+      startTime: 1698667200,
+      endTime: 1698670800,
+   },
+   {
+      id: '2',
+      owner: '2',
+      startTime: 1698678000,
+      endTime: 1698681600,
+   },
+];
+
+const reservations$ = writable<ReservationStoreData>(null);
+
+export const loadSlots = (): Reservation[] => {
+   return mockedReservations;
+};

src/routes/calendar/Calendar.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+   import Datepicker from '../../lib/Datepicker.svelte';
+
+   let pickedDate: Date;
+</script>
+
+<p>{pickedDate}</p>
+<Datepicker bind:date={pickedDate} />

src/routes/lost-and-found/LostAndFound.svelte

@@ -0,0 +1 @@
+<p>Hello Ariane!</p>