make card display more flexible

ssciwr · Aug 23, 2024 · 0703ab2 · 0703ab2
1 parent 2f0ad91
commit 0703ab2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 41 deletions.
diff --git a/src/lib/components/DataDisplay/CardDisplay.svelte b/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -1,26 +1,31 @@
 <script>
 	import { Button, Card } from 'flowbite-svelte';
 	import { ArrowRightOutline } from 'flowbite-svelte-icons';
-	export let header = 'header';
-	export let summary;
-	export let button;
-	export let link;
-	export let image;
+	export let data = {
+		header: undefined,
+		summary: undefined,
+		button: undefined,
+		link: undefined,
+		image: undefined
+	};
+	export let props = { class: 'm-4 w-full p-6' };
 </script>
 
 <div class="space-y-4">
-	<Card class="m-4 w-full p-6" img={image || null} size="md" horizontal>
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-			{header}
-		</h5>
-		{#if summary}
+	<Card img={data.image} {...props}>
+		{#if data.header}
+			<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+				{data.header}
+			</h5>
+		{/if}
+		{#if data.summary}
 			<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-				{summary}
+				{data.summary}
 			</p>
 		{/if}
-		{#if button}
-			<Button href={link} class="w-fit"
-				>{button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		{#if data.button}
+			<Button href={data.link} class="w-fit"
+				>{data.button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
 			>
 		{/if}
 	</Card>

diff --git a/src/lib/components/DataDisplay/GalleryDisplay.svelte b/src/lib/components/DataDisplay/GalleryDisplay.svelte
@@ -1,15 +1,17 @@
 <script>
 	import { Gallery } from 'flowbite-svelte';
 	export let data;
-	export let header = 'Currently monitored children';
+	export let header;
 	export let itemComponent;
 	export let componentProps;
 </script>
 
-<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{header}</h1>
+{#if header}
+	<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{header}</h1>
+{/if}
 
-<Gallery class="grid-cols-3 gap-4 md:grid-cols-2">
+<Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
 	{#each data as item}
-		<svelte:component this={itemComponent} {data} {...componentProps} />
+		<svelte:component this={itemComponent} data={item} props={componentProps} />
 	{/each}
 </Gallery>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
@@ -1,6 +1,8 @@
 <script>
-	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
-	import { Gallery } from 'flowbite-svelte';
+	// @ts-nocheck
+
+	import CardDisplay from './DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from './DataDisplay/GalleryDisplay.svelte';
 	export let getStarted = '/firstdropdown';
 
 	export let items = [
@@ -9,67 +11,59 @@
 			summary:
 				'Mondey ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von Kindern bis 6 Jahren.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wozu ist Mondey gut?',
 			summary:
 				'Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt einem übersichtlichen Ampelsystem.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Was umfasst Mondey?',
 			summary:
 				'Mondey umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis 6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale Beziehungen.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wie funktioniert Mondey?',
 			summary:
 				'Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wo fange ich an?',
 			summary: 'Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.',
 			link: getStarted,
-			buttonName: 'Los geht´s'
+			button: 'Los geht´s'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
 			link: '/info',
-			buttonName: 'Mehr Info'
+			button: 'Mehr Info'
 		}
 	];
+
+	const props = {};
 </script>
 
-<!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
-<Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
-	{#each items as item}
-		<CardDisplay
-			header={item.header}
-			summary={item.summary}
-			link={item.link}
-			button={item.buttonName}
-		/>
-	{/each}
-</Gallery>
+<GalleryDisplay itemComponent={CardDisplay} data={items} componentProps={props} />
diff --git a/src/routes/childrengallery/+page.svelte b/src/routes/childrengallery/+page.svelte
@@ -1,6 +1,14 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
-	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
+
+	const cardProps = {
+		header: 'Child',
+		summary: 'Summary',
+		button: 'View',
+		link: '/child',
+		image: '/lib/assets/children.png'
+	};
+
 	const data = [
 		{
 			name: 'A',
@@ -71,5 +79,5 @@
 	nextpage={'/firstdropdown'}
 	infopage="/info"
 >
-	<GalleryDisplay {data} />
+	<!-- <GalleryDisplay {data} itemComponent="{CardDisplay}," componentProps={cardProps} /> -->
 </AbstractContent>