add Zustand Counter

react-advanced-tag1/src/App.tsx

@@ -8,6 +8,7 @@ import EffectExercisesPage from './routes/EffectExercisesPage'
 import FormsPage from './routes/FormsPage'
 import MemoCallbackPage from './routes/MemoCallbackPage'
 import ComponentWrapperPage from './routes/ComponentWrapperPage'
+import ZustandCounterPage from './routes/ZustandCounterPage'
 
 function App() {
 
@@ -19,7 +20,7 @@ function App() {
             <Route path="/forms" element={<FormsPage />} />
             <Route path="/memocallback" element={<MemoCallbackPage />} />
             <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
-
+            <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
           </Routes>
         </MainLayout>
 }

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx

@@ -5,7 +5,7 @@ interface ComponentWrapperProps {
     children: React.ReactNode;
 }
 export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement {
-    console.log("ComponentWrapper rendered");
+    console.log("ComponentWrapper rendered:", title);
     return (
         <div className='component-wrapper'>
             {title && <h2>{title}</h2>}

react-advanced-tag1/src/common/components/Header/Navigation.tsx

@@ -8,6 +8,7 @@ export default function Navigation () {
                 <li><a href="/forms">Forms</a></li>
                 <li><a href="/memocallback">Memo und Callback</a></li>
                 <li><a href="/componentwrapper">Component Wrapper</a></li>
+                <li><a href="/zustandcounterpage">ZustandCounterPage</a></li>
             </ul>
         </nav>);
 }

react-advanced-tag1/src/common/stores/counter-store.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+}
+
+const useCounterStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));
+
+export default useCounterStore;

react-advanced-tag1/src/routes/ComponentWrapperPage.tsx

@@ -4,6 +4,7 @@ import Modal from "../common/components/Modal";
 import { useState } from "react";
 
 export default function ComponentWrapperPage() {
+  
   const [modalOpen, setModalOpen] = useState(false);
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>

react-advanced-tag1/src/routes/ZustandCounterPage.tsx

@@ -0,0 +1,18 @@
+import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import useCounterStore from "../common/stores/counter-store";
+
+export default function ZustandCounterPage() {
+  const {decrement, increment} = useCounterStore();
+  return (
+      <ComponentWrapper title='Zustand Counter'>
+          <button onClick={increment}>Increment</button>
+          <button onClick={decrement}>Decrement</button>
+          <CounterValue />
+      </ComponentWrapper>
+  );
+}
+
+function CounterValue() {
+  const count = useCounterStore((state) => state.count);
+  return <p>Count: {count}</p>;
+}