1 files changed, 44 insertions, 35 deletions
diff --git a/src/slides.svelte b/src/slides.svelte
index 64166a8..c4a3d70 100644
--- a/src/slides.svelte
+++ b/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>
-			<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>
+		<div class="mx-auto w-[800px]">
+			<Code lang="js" lines="3">
+				{`
+				import React, {useState} from 'react';
+
+				const [value, setValue] = useState(null);
+				`}
+			</Code>
+		</div>
+		<StateNotes></StateNotes>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-pink-700">useState()</p>
+		<div class="mx-auto w-[800px]">
+			<Code lang="js" lines="3-6">
+				{`
+					import React, {useState} from 'react';
+				
+					const [value, setValue] = useState({
+						id: 12,
+						name: "YouName"
+					})
+				`}
+			</Code>
+		</div>
+		<StateNotes></StateNotes>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-pink-700">useState()</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="7|3-5|3-7">
+				{`
+				import React, {useState} from 'react';
+
+				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>