Adds Notes and Code Examples

* Move Notes to separate file
* Adds Code Examples

src/notes/state.notes.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Notes } from '@components'
+</script>
+<Notes>
+    <ul>
+        <li>
+            useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT
+        </li>
+        <li>
+            useState ENCAPSULATES only a single value
+        </li>
+        <li>
+            For mulatiple values you may need to call multiple useState's
+        </li>
+        <li>
+            useState arguments
+            <ul>
+                <li>
+                    Initialization of a state variable
+                </li>
+                <li>
+                    Passing function as initial value - to calculate an initial value
+                </li>
+            </ul>
+        </li>
+        <li>
+            Managing multiple states
+            <ul>
+                <li>
+                    Multi-variable's
+                </li>
+                <li>
+                    Object as value
+                </li>
+            </ul>
+        </li>
+    </ul>
+</Notes>

src/slides.svelte

@@ -9,6 +9,7 @@
 		Code
 	} from '@components'
 	import { signal } from '@motion'
+	import StateNotes from "./notes/state.notes.svelte"
 
 	const circle = signal(
 		{ x: 0, y: 200, r: 80, fill: '#00ffff' },
@@ -83,41 +84,49 @@
 	</Slide>
 	<Slide on:in={animate} animate>
 		<p class="font-bold text-6xl mb-4 text-pink-700">useState()</p>
-		<Notes>
+		<div class="mx-auto w-[800px]">
-			<ul>
+			<Code lang="js" lines="3">
-				<li>
+				{`
-					useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT
+				import React, {useState} from 'react';
-				</li>
+
-				<li>
+				const [value, setValue] = useState(null);
-					useState ENCAPSULATES only a single value
+				`}
-				</li>
+			</Code>
-				<li>
+		</div>
-					For mulatiple values you may need to call multiple useState's
+		<StateNotes></StateNotes>
-				</li>
+	</Slide>
-				<li>
+	<Slide on:in={animate} animate>
-					useState arguments
+		<p class="font-bold text-6xl mb-4 text-pink-700">useState()</p>
-					<ul>
+		<div class="mx-auto w-[800px]">
-						<li>
+			<Code lang="js" lines="3-6">
-							Initialization of a state variable
+				{`
-						</li>
+					import React, {useState} from 'react';
-						<li>
+				
-							Passing function as initial value - to calculate an initial value
+					const [value, setValue] = useState({
-						</li>
+						id: 12,
-					</ul>
+						name: "YouName"
-				</li>
+					})
-				<li>
+				`}
-					Managing multiple states
+			</Code>
-					<ul>
+		</div>
-						<li>
+		<StateNotes></StateNotes>
-							Multi-variable's
+	</Slide>
-						</li>
+	<Slide on:in={animate} animate>
-						<li>
+		<p class="font-bold text-6xl mb-4 text-pink-700">useState()</p>
-							Object as value
+		<div class="mx-auto">
-						</li>
+			<Code lang="js" lines="7|3-5|3-7">
-					</ul>
+				{`
-				</li>
+				import React, {useState} from 'react';
-			</ul>
+
-		</Notes>
+				function calculateValue() {
+					return Math.sqrt(64);
+				}
+
+				const [value, setValue] = useState(calculateValue());
+				`}
+			</Code>
+		</div>
+		<StateNotes></StateNotes>
 	</Slide>
 	<Slide on:in={animate} animate>
 		<p class="font-bold text-6xl mb-4 text-yellow-500">Side Effects</p>