feat(web-service): create ShoppingListItem component

src/web-service/svelte/src/App.svelte

@@ -1,27 +1,23 @@
 <header class="px-5 mt-16 flex items-center justify-between sm:ml-20 md:ml-24 lg:max-w-4xl lg:mx-auto xl:max-w-5xl">
-    <h1 class="font-bold text-lg lg:text-xl xl:text-3xl">PriceWhisper</h1>
+    <h1 class="font-bold text-xl md:text-2xl xl:text-3xl">
+        Deine Einkaufslisten
+    </h1>
 </header>
 
 <main class="sm:ml-20 md:ml-24 lg:max-w-4xl lg:mx-auto xl:max-w-5xl">
-    <section class="mx-5 mt-8 rounded-2xl bg-blue-light/50 p-5 lg:p-8">
-        <figure class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-dark/40">
-            <Euro classes="w-7 h-7 text-blue-dark"></Euro>
-        </figure>
-        <h2 class="text-lg font-semibold mt-5 lg:text-xl xl:text-2xl xl:mt-8">
-            Spare bis zu 35% Prozent auf deinen nächsten Supermarkt-Einkauf!
-        </h2>
-        <p class="mt-3 text-base font-light lg:text-lg">
-            Tempor qui cillum fugiat aliqua Lorem sint laborum duis. Esse elit dolore dolor quis mollit.
-            Eu excepteur occaecat ea adipisicing ipsum proident nisi.
-        </p>
-    </section>
+    <h2 class="px-5 text-gray-dark text-sm font-medium mt-10 lg:text-base">
+        Offene Einkaufslisten
+    </h2>
+    <ul class="px-5 mt-4 grid grid-cols-1 gap-y-4 lg:gap-y-6 lg:mt-6">
+        <ShoppingListItem description="Geburtstagskuchen"/>
+        <ShoppingListItem description="Frühstück mit Anne"/>
+    </ul>
 </main>
 
 <NavBar/>
-
 <script lang="ts">
-    import Euro from "./assets/svg/Euro.svelte";
     import NavBar from "./lib/navigation/NavBar.svelte";
+    import ShoppingListItem from "./lib/ShoppingListItem.svelte";
 </script>
 
 

src/web-service/svelte/src/assets/svg/Placeholder.svelte

@@ -0,0 +1,7 @@
+<svg class="{classes}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+</svg>
+
+<script lang="ts">
+    export let classes: string = '';
+</script>

src/web-service/svelte/src/lib/ShoppingListItem.svelte

@@ -0,0 +1,18 @@
+<li>
+    <a href="/" class="bg-white w-full rounded-2xl p-3 flex items-center gap-x-4 transition-all ease-in-out duration-300 group hover:bg-blue-light/25 lg:p-6 lg:gap-x-6">
+        <figure class="bg-green-light/25 rounded-full w-14 h-14 flex items-center justify-center lg:w-16 lg:h-16">
+            <span class="text-2xl lg:text-3xl">🥗</span>
+        </figure>
+        <div class="text-left">
+            <h3 class="font-semibold text-base transition-all ease-in-out duration-300 group-hover:text-blue-dark lg:text-lg">
+                {description}
+            </h3>
+            <p class="text-xs text-gray-dark mt-1 lg:text-sm">Anzahl der Einträge: {count}</p>
+        </div>
+    </a>
+</li>
+
+<script lang="ts">
+    export let description: string = 'Name der Einkaufsliste';
+    export let count: number = 0;
+</script>

src/web-service/svelte/src/lib/startpage/Startpage.svelte

@@ -0,0 +1,16 @@
+<section class="mx-5 mt-8 rounded-2xl bg-blue-light/50 p-5 lg:p-8">
+    <figure class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-dark/40">
+        <Euro classes="w-7 h-7 text-blue-dark"></Euro>
+    </figure>
+    <h2 class="text-lg font-semibold mt-5 lg:text-xl xl:text-2xl xl:mt-8">
+        Spare bis zu 35% Prozent auf deinen nächsten Supermarkt-Einkauf!
+    </h2>
+    <p class="mt-3 text-base font-light lg:text-lg">
+        Tempor qui cillum fugiat aliqua Lorem sint laborum duis. Esse elit dolore dolor quis mollit.
+        Eu excepteur occaecat ea adipisicing ipsum proident nisi.
+    </p>
+</section>
+
+<script lang="ts">
+    import Euro from "../../assets/svg/Euro.svelte";
+</script>