Dashboard Startseite

src/modules/Dashboard/DashboardModule.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { BenutzerClient, GebaeudeClient } from "#components/Ausweis/types";
+
+	export let user: BenutzerClient;
+	export let gebaeudeArray: GebaeudeClient[];
+</script>
+
+<h1 class="text-4xl font-medium my-8">Willkommen zurück, {user.vorname}!</h1>
+<p class="text-lg">
+	Hier finden Sie eine Übersicht über all ihre Ausweise und Gebäude.
+</p>
+
+<h1 class="text-4xl font-medium my-8">Gebäude</h1>
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+	{#each gebaeudeArray as gebaeude}
+	<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
+		<figure class="lg:w-1/2">
+			<img
+				src={(gebaeude.gebaeude_bilder && `/bilder/${gebaeude.gebaeude_bilder[0]?.uid}.webp`) || "/images/placeholder.jpg"}
+				class="object-cover w-full h-full"
+				alt="Gebäudebild"
+			/>
+		</figure>
+		<div class="card-body lg:w-1/2 p-4">
+			<h4 class="text-lg font-semibold">{gebaeude.adresse}, {gebaeude.plz} {gebaeude.ort}</h4>
+		</div>
+	</div>
+{/each}
+</div>