Add Milestone component

src/lib/components/Childrenpage.svelte

@@ -1,3 +1,4 @@
+
 <script context="module">
 	export function convertData(rawdata) {
 		let data = rawdata.map((item) => {

src/lib/components/Milestone.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import {P} from 'flowbite-svelte';
+    import MilestoneButton from "$lib/components/MilestoneButton.svelte";
+
+    export let data;
+    let current_milestone_index = 0;
+    const images = import.meta.glob('$lib/assets/*.jpg', {eager: true, query: '?url', import: 'default'});
+
+    function next_milestone() {
+        if(current_milestone_index + 1 < data.milestones.length) {
+            current_milestone_index += 1;
+            console.log(current_milestone_index);
+        }
+    }
+</script>
+
+<div class="flex flex-col bg-white border border-gray-200 rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 md:max-w-5xl">
+    <div class="bg-gray-100 dark:border-gray-700 dark:bg-gray-600 rounded-t-lg border border-gray-200">
+        <h1 class="mx-4 my-2 text-xl font-bold text-gray-700 dark:text-gray-400">{data.title} {current_milestone_index+1} / {data.milestones.length}</h1></div>
+    <div>
+        <div class="w-full flex flex-col md:flex-row">
+            <img class="object-cover h-48 md:h-96 md:rounded-bl-lg w-full md:w-64 lg:w-96"
+                 src={images[`/src/lib/assets/${data.milestones[current_milestone_index].img}`]} alt="">
+            <div class="m-2 md:m-4">
+                <h2 class="mb-2 text-2xl font-bold text-gray-700 dark:text-gray-400">{data.milestones[current_milestone_index].title}</h2>
+                <P>{data.milestones[current_milestone_index].desc}</P>
+            </div>
+            <div class="flex flex-col justify-items-stretch rounded-lg m-1">
+                <MilestoneButton color="green-50" onClick={next_milestone}>
+                    Noch gar nicht
+                </MilestoneButton>
+                <MilestoneButton color="green-100" onClick={next_milestone}>
+                    In Ansätzen
+                </MilestoneButton>
+                <MilestoneButton color="green-200" onClick={next_milestone}>
+                    Weitgehend
+                </MilestoneButton>
+                <MilestoneButton color="green-400" onClick={next_milestone}>
+                    Zuverlässig
+                </MilestoneButton>
+            </div>
+        </div>
+    </div>
+</div>

src/lib/components/MilestoneButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let color: string = 'white-900';
+    export let onClick: (e: MouseEvent) => void;
+</script>
+
+<button type="button" on:click={onClick}
+        class={`bg-${color} border border-gray-200 opacity-50 hover:opacity-80 focus:opacity-100 focus:outline-none focus:ring-4 focus:ring-blue-400 rounded-lg font-medium border-1 px-5 py-3 m-1 md:my-2 text-center`}>
+    <slot />
+</button>

src/routes/milestone/+page.svelte

@@ -0,0 +1,32 @@
+<script>
+    import Milestone from '$lib/components/Milestone.svelte';
+
+    const data = {
+        "title": "Grobmotorik",
+        "desc": " Hier geht es darum, zu beschreiben, wie sich das Kind fortbewegt Und seinen Körper (Rumpf, Arme, Beine) kontrollieren kann.",
+        "milestones": [
+            {
+                "number": 1,
+                "title": "Das Köpfchen alleine heben",
+                "desc": "Kind liegt auf dem Bauch, hält die Arme angewinkelt neben dem Körper und hebt sein Köpfchen aus eigener Kraft so hoch, dass das Kinn nicht mehr die Auflage berührt. Diese Position kann es mehr als 3 Sekunden halten.",
+                "img": "baby1.jpg"
+            },
+            {
+                "number": 2,
+                "title": "Den Kopf frei bewegen",
+                "desc": "Kind kann seinen Kopf frei halten und bewegen, wenn es z.B. auf dem Schoß sitzt. Wenn man seinen Körper ein wenig schräg hält, gleicht es diese Bewegung mit dem Kopf aus. Der Kopf wackelt kaum oder gar nicht, wenn das Kind ihn dreht.",
+                "img": "baby2.jpg"
+            },
+            {
+                "number": 3,
+                "title": "Sich in Bauchlage mit gestreckten Armen aufstützen",
+                "desc": "Kind liegt auf dem Bauch. Es stützt sich mit beiden Armen gestreckt von der Unterlage ab und hebt seinen Rücken an, um den Kopf aufrecht zu halten. Schultern und Brust liegen für mehr als 3 Sekunden nicht mehr auf der Unterlage.",
+                "img": "baby3.jpg"
+            }
+        ]
+    }
+</script>
+
+<div class="flex justify-center items-center">
+    <Milestone data={data}/>
+</div>

tailwind.config.ts

@@ -9,6 +9,12 @@ export default {
 		'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
 	],
 	darkMode: 'selector',
+	safelist: [
+		'bg-green-50',
+		'bg-green-100',
+		'bg-green-200',
+		'bg-green-400',
+	],
 	theme: {
 		extend: {
 			colors: {