Füge Modal-Komponente für Produkt erstellen hinzu in +page.svelte

Gschaftlhaberer · Apr 12, 2024 · bb8b117 · bb8b117
1 parent 5c38a20
commit bb8b117
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/app/src/routes/items/[id]/+page.svelte b/app/src/routes/items/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Product from '$lib/components/Product.svelte';
-	import { Heading, ListPlaceholder, Alert, P } from 'flowbite-svelte';
+	import { Heading, ListPlaceholder, Alert, P, Modal, Label } from 'flowbite-svelte';
 	import type { PageData } from './$types';
 	import { db, type ExistingDocument, type Product as PT } from '$lib/db';
 	import { browser } from '$app/environment';
@@ -92,22 +92,22 @@
 	<Button on:click={() => (showPopup = true)}>Produkt erstellen</Button>
 </div>
 
-{#if showPopup}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-		<Card class="rounded bg-white p-6 shadow-lg">
-			<h2 class="mb-4 text-center text-xl font-bold">Produkt erstellen</h2>
-			<Input bind:value={productName} placeholder="Produktname" class="mb-4" />
-			<Input type="number" bind:value={productCount} placeholder="Anzahl" class="mb-4" />
-			<div class="flex justify-end space-x-2">
-				<Button on:click={createProduct} class="bg-blue-500 text-white hover:bg-blue-700"
-					>Erstellen</Button
-				>
-				<Button
-					variant="secondary"
-					on:click={() => (showPopup = false)}
-					class="bg-gray-500 text-white hover:bg-gray-700">Schließen</Button
-				>
-			</div>
-		</Card>
-	</div>
-{/if}
+
+
+<Modal bind:open={showPopup} outsideclose>
+    <form class="flex flex-col space-y-6" on:submit|preventDefault={createProduct}>
+        <Heading tag="h4">Produkt erstellen</Heading>
+        <Label for="product-name" class="space-y-2">
+            <span>Produktname:</span>
+            <Input id="product-name" bind:value={productName} placeholder="Produktname" required class="w-full" />
+        </Label>
+        <Label for="product-count" class="space-y-2">
+            <span>Anzahl:</span>
+            <Input type="number" id="product-count" bind:value={productCount} placeholder="Anzahl" required class="w-full" />
+        </Label>
+        <div class="flex justify-end space-x-2">
+            <Button type="submit" variant="primary" class="w-full">Erstellen</Button>
+            <Button variant="secondary" on:click={() => (showPopup = false)} class="w-full">Schließen</Button>
+        </div>
+    </form>
+</Modal>