Benutzung von Solid JS Store um Zustand über den Komponentnebaum zu teilen.

src/App.tsx

@@ -1,13 +1,45 @@
 import type { Component } from 'solid-js';
+import { createStore } from 'solid-js/store'
+
 
 import logo from './logo.svg';
 import styles from './App.module.css';
 import { CalendarComponent } from './Calendar';
+import { DiaryComponent } from './Diary';
+import { ProgressComponent } from './Progress';
+
+export const [store, setStore] = createStore({
+    calendarClick: new Date(),
+    localDate: Date.now(),
+    userCount: 3,
+    users: [
+      {
+        id: 0,
+        username: "felix909",
+        location: "England",
+        loggedIn: false,
+      },
+      {
+        id: 1,
+        username: "tracy634",
+        location: "Canada",
+        loggedIn: true,
+      },
+      {
+        id: 2,
+        username: "johny123",
+        location: "India",
+        loggedIn: true,
+      },
+    ],
+  })
 
 const App: Component = () => {
   return (
     <>
+    <ProgressComponent/>
     <CalendarComponent/>
+    <DiaryComponent/>
     </>
 
   );

src/Calendar.tsx

@@ -1,5 +1,5 @@
 import { For, createSignal, Show } from 'solid-js';
-
+import { store, setStore } from './App';
 
 function getDateArray(year: number, month: number, startday: number) {
   //Das bedeutet Montag im englischen Wochenformat.
@@ -18,17 +18,18 @@ function getDateArray(year: number, month: number, startday: number) {
   } else {
     const vorMonatTage = new Date(year, month, 0).getDate();
     for (let i = wochenTagDesErsten - 1; i >= 0; i--) {
-      const tagObj = { "value": vorMonatTage - i, "enabled": false }
+      const tagObj = { "value": vorMonatTage - i, "enabled": false, "date": new Date() }
       tage.push(tagObj);
     }
   }
   for (let i = 1; i <= new Date(year, month + 1, 0).getDate(); i++) {
-    const tagObj = { "value": i, "enabled": true }
+    console.log(i);
+    const tagObj = { "value": i, "enabled": true, "date": new Date(year, month, i, 10,0) }
     tage.push(tagObj);
   }
   let nextDay = 1;
   for (let i = tage.length; i < 42; i++) {
-    const tagObj = { "value": nextDay, "enabled": false }
+    const tagObj = { "value": nextDay, "enabled": false, "date": new Date() }
     tage.push(tagObj);
     nextDay++;
   }
@@ -36,9 +37,9 @@ function getDateArray(year: number, month: number, startday: number) {
 }
 
 export function CalendarComponent() {
-  const [month, setMonth] = createSignal(0);
+  const [month, setMonth] = createSignal(new Date(store.localDate).getMonth());
-  const [year, setYear] = createSignal(2025);
+  const [year, setYear] = createSignal(new Date(store.localDate).getFullYear());
-  const [startDay, setStartday] = createSignal(1);
+  const [startDay, setStartday] = createSignal(new Date(store.localDate).getDate());
 
   let onclickDayOfWeekHeader = (day: number) => {
     setStartday(day);
@@ -53,6 +54,14 @@ export function CalendarComponent() {
     setMonth(month() + 1);
   };
 
+  let onclickDayOfMonth = (day: Date) => {
+    setStore("calendarClick", day);
+  }
+
+  let getSelectedDay = () => {
+    return store.calendarClick.getDate();
+  }
+
   let onclickPrevMonth = () => {
     if (month() <= 0) {
       setMonth(11);
@@ -82,11 +91,9 @@ export function CalendarComponent() {
                   </button>
                 </div>
               }
-            
-            
             >
-              <div class="bg-amber-100">
+              <div class={getSelectedDay() === day.value ? "bg-amber-200": "bg-amber-100"}>
-                <button type="button" class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
+                <button type="button" onclick={() => onclickDayOfMonth(day.date)} class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
                 >
                   <time datetime="#_">{day.value}</time>
                 </button>
@@ -145,6 +152,7 @@ export function CalendarComponent() {
           </button>
         </div>
       </div>
+          
     </div >
   )
 }

src/Diary.tsx

@@ -0,0 +1,10 @@
+import { store, setStore } from './App';
+export function DiaryComponent(){
+   return (
+    <>
+    <div>
+        {store.calendarClick.toUTCString()} 
+        </div> 
+    </>
+   ); 
+}

src/Progress.tsx

@@ -0,0 +1,51 @@
+export function ProgressComponent() {
+    return (
+        <div class="grid-rows-1 grid-cols-2 inline-flex3 bg-amber-50 mx-auto inline-flex w-max">
+            <div class="relative flex items-center h-18 p-4 m-4 bg-amber-300 text-amber-300 border-b-1 w-50">
+                <div class="inline-flex items-center">
+                    <label class="flex items-center cursor-pointer relative">
+                        <input type="checkbox" class="peer h-6 w-6 cursor-pointer transition-all appearance-none rounded-full bg-slate-100 shadow hover:shadow-md border border-slate-300 checked:bg-slate-800 checked:border-slate-800" id="check-custom-style" />
+                        <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                            </svg>
+                        </span>
+                    </label>
+                </div>
+                <span class="px-4 text-black">1. Schritt</span>
+                <svg
+                    class="absolute left-full h-full w-4 text-amber-300"
+                    viewBox="0 0 20 40"
+                    preserveAspectRatio="none"
+                >
+                    <path d="M0,0 L20,20 L0,40 Z" fill="currentColor" />
+                </svg>
+            </div>
+
+            <div class="p-4 m-4 inline-flex "></div>
+
+
+            <div class="relative flex items-center h-18 p-4 m-4 bg-amber-300 text-amber-300 border-b-1 w-50">
+                <div class="inline-flex items-center">
+                    <label class="flex items-center cursor-pointer relative">
+                        <input type="checkbox" class="peer h-6 w-6 cursor-pointer transition-all appearance-none rounded-full bg-slate-100 shadow hover:shadow-md border border-slate-300 checked:bg-slate-800 checked:border-slate-800" id="check-custom-style" />
+                        <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                            </svg>
+                        </span>
+                    </label>
+                </div>
+                <span class="px-4 text-black">2. Schritt</span>
+                <svg
+                    class="absolute left-full h-full w-4 text-amber-300"
+                    viewBox="0 0 20 40"
+                    preserveAspectRatio="none"
+                >
+                    <path d="M0,0 L20,20 L0,40 Z" fill="currentColor" />
+                </svg>
+            </div>
+
+        </div>
+    )
+}