Updated resources and demos for up to workshop 4

app/_components/(workshop)/link-preview/link-preview.jsx

@@ -26,7 +26,7 @@ export default function LinkPreview({ title, description, link, theme }){
             } catch (error) {
                 console.error("Error fetching link preview:", error)
 
-                setPreviewImglink("/images/filler.jpeg")
+                setPreviewImglink("/images/filler.png")
                 setLoading(false)
             }
         }
@@ -35,7 +35,7 @@ export default function LinkPreview({ title, description, link, theme }){
     }, [link])
 
     return(
-        <a href={link}>
+        <a href={link} target="_blank">
             <div className={`${theme=="light" ? styles.container_light : styles.container_dark}`}>
                 <p className={`${theme=="light" ? styles.title_light : styles.title_dark}`}>{title}</p>
                 {theme=="dark" &&

app/_components/(workshop)/link-preview/link-preview.module.scss

@@ -40,7 +40,7 @@
 
     img {
         border-radius: 16px;
-        background-color: rgba(0, 0, 0, 0.5);
+        //background-color: rgba(0, 0, 0, 0.5);
     }
 }
 

app/_components/(workshop)/materials-lessons/materialsLessons.jsx

@@ -4,12 +4,16 @@ import Image from 'next/image'
 import styles from './materialsLessons.module.scss'
 
 import Lesson from './lessonCard'
-import Demo1 from '@/_demos/demo1'
-import Inspect from '@/_demos/inspect'
+import FlexDemo from '@/_demos/flex'
+import InspectDemo from '@/_demos/inspect'
+import MapDemo from '@/_demos/map'
+import StateDemo from '@/_demos/state'
 
 const componentMap = {
-    Demo1: <Demo1 />,
-    Inspect: <Inspect />
+    FlexDemo: <FlexDemo />,
+    InspectDemo: <InspectDemo />,
+    MapDemo: <MapDemo />,
+    StateDemo: <StateDemo />,
 }
 
 export default function Materials({ slideDeckLink, recordingLink, lessons }) {
@@ -24,9 +28,9 @@ export default function Materials({ slideDeckLink, recordingLink, lessons }) {
                 <div className={styles.link}>
                     <LinkPreview title="Workshop Slides" link={slideDeckLink} theme="light" />
                 </div>
-                <div className={styles.link}>
+                {recordingLink != "" && <div className={styles.link}>
                     <LinkPreview title="Workshop Recording" link={recordingLink} theme="light" />
-                </div>
+                </div>}
             </div>
 
             <h1>Lessons</h1>

app/_demos/demo1.jsx → app/_demos/flex.jsx

@@ -1,4 +1,4 @@
-import styles from './demo1.module.scss'
+import styles from './flex.module.scss'
 
 export default function Demo1(){
     return (

app/_demos/inspect.jsx

@@ -3,7 +3,7 @@ import { IoMdStar } from "react-icons/io";
 import { IoMdStarHalf } from "react-icons/io";
 
 
-export default function Inspect(){
+export default function InspectDemo(){
     return (
         <div className={styles.big_box}>
             <img src="/images/salad.jpg" alt="Caesar salad" className={styles.salad} width="300" height="200" />

app/_demos/inspect.module.scss

@@ -1,13 +1,15 @@
 .big_box {
-    width: 100%;
+    width: 80%;
     aspect-ratio: 1.5;
 
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;
-    padding: 20px;
+    padding: 10px;
+    margin-left: 50px;
+    margin-right: 20px;
 
     background-color: lightgoldenrodyellow;
 }

app/_demos/map.jsx

@@ -0,0 +1,21 @@
+import styles from './map.module.scss'
+
+const apples = ["Granny Smith", "Fuji", "Gala"]
+
+export default function MapDemo(){
+    return (
+        <div className={styles.big_box}>
+            <p className={styles.description}>{"Given an array, apples=[\'Granny Smith\', \'Fuji\', \'Gala\'], you can use map to generate an array of UIs for each apple in the array"}</p>
+            <div className={styles.apples}>
+                {apples.map((apple)=>{
+                    return (
+                    <div key={apple} className={styles.apple}>
+                        <div className={styles.stem} />
+                        <div className={styles.leaf} />
+                    </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}

app/_demos/map.module.scss

@@ -0,0 +1,56 @@
+.big_box {
+    width: 100%;
+    aspect-ratio: 1.5;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+
+    background-color: rgb(207, 206, 206);
+}
+
+.description {
+    font-size: large;
+    color: black;
+    text-align: left;
+    margin-bottom: 50px;
+}
+
+.apples {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    column-gap: 20px;
+}
+
+.apple {
+    width: 80px;
+    height: 85px;
+    background-color: red;
+    position: relative;
+    border-radius: 50% / 55%;
+}
+
+.leaf {
+    position: absolute;
+    top: -12px;
+    left: 60%;
+    transform: rotate(-20deg);
+    width: 15px;
+    height: 10px;
+    background-color: green;
+    border-radius: 50%;
+}
+
+.stem {
+    position: absolute;
+    top: -18px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 15px;
+    background-color: brown;
+    border-radius: 3px;
+}

app/_demos/state.jsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import styles from './state.module.scss'
+
+export default function StateDemo(){
+    const [count, setCount] = useState(0);
+
+    return (
+        <div className={styles.big_box}>
+            <h5>Cookie clicker</h5>
+            <p>{count}</p>
+            <img onClick={()=>{setCount(count+1)}} src="/images/cookie.jpg" alt="Cookie" className={styles.cookie} width="300" height="200" />
+
+        </div>
+    )
+}

app/_demos/state.module.scss

@@ -0,0 +1,12 @@
+.big_box {
+    width: 100%;
+    aspect-ratio: 1.5;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+
+    background-color: white;
+}