From 70a1f0a7e4c471ff3b0fa256cba4d7ea21329301 Mon Sep 17 00:00:00 2001
From: Hasan Rawjee <105398848+hasanrawjee@users.noreply.github.com>
Date: Mon, 12 Feb 2024 23:57:08 -0500
Subject: [PATCH 1/2] Basic changes

---
 package.json       | 4 ++--
 src/pages/index.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 34eaa32d..6fb661b2 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,10 @@
   "dependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "next": "13.5.4"
+    "next": "^13.5.4"
   },
   "devDependencies": {
     "eslint": "^8",
     "eslint-config-next": "13.5.4"
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 69abbb64..118ab30a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,12 +2,12 @@
 // import Image from 'next/image'
 // import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
-import Profile from './components/profile'
+import Gallery from './components/gallery'
 
 export default function Home() {
   return (
     <div className={styles.main}>
-        <Profile />
+      <Gallery />
     </div>
   )
 }

From 838a12b5e92e91528e248eb248c7bbc336e99549 Mon Sep 17 00:00:00 2001
From: Hasan Rawjee <105398848+hasanrawjee@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:42:55 -0500
Subject: [PATCH 2/2] To do complete

---
 src/pages/index.js                  |  4 +-
 src/pages/qcomps/bios.js            | 16 ++---
 src/pages/qcomps/firstcomp.js       | 13 +++-
 src/pages/qcomps/gallery_props.js   | 92 ++++++++++++++---------------
 src/pages/qcomps/profile_mistake.js |  3 +-
 src/pages/qcomps/props_item.js      |  5 +-
 src/pages/qcomps/todos.js           |  6 +-
 7 files changed, 72 insertions(+), 67 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 118ab30a..04738f66 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,12 +2,12 @@
 // import Image from 'next/image'
 // import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
-import Gallery from './components/gallery'
+import PackingList from './qcomps/props_item'
 
 export default function Home() {
   return (
     <div className={styles.main}>
-      <Gallery />
+      <PackingList />
     </div>
   )
 }
diff --git a/src/pages/qcomps/bios.js b/src/pages/qcomps/bios.js
index cc9350fd..3d3b8399 100644
--- a/src/pages/qcomps/bios.js
+++ b/src/pages/qcomps/bios.js
@@ -1,12 +1,14 @@
 export default function Bio() {
   return (
-    <div class="intro">
-      <h1>Welcome to my website!</h1>
+    <div>
+      <div class="intro">
+        <h1>Welcome to my website!</h1>
+      </div>
+      <p class="summary">
+        You can find my thoughts here.
+        <br /><br />
+        <b>And <i>pictures</i></b> of people!
+      </p>
     </div>
-    <p class="summary">
-      You can find my thoughts here.
-      <br/><br/>
-      <b>And <i>pictures</i></b> of people!
-    </p>
   );
 }
\ No newline at end of file
diff --git a/src/pages/qcomps/firstcomp.js b/src/pages/qcomps/firstcomp.js
index 9cce715e..bcacd1de 100644
--- a/src/pages/qcomps/firstcomp.js
+++ b/src/pages/qcomps/firstcomp.js
@@ -1 +1,12 @@
-function MyComp() {}
\ No newline at end of file
+export default function MyComp() {
+    return (
+        <div>
+            <h1> My first component </h1>
+            <ol>
+                <li> Components: UI Building Block</li>
+                <li> Defining a Component </li>
+                <li> Using a component </li>
+            </ol>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js
index fc118123..03cf50ec 100644
--- a/src/pages/qcomps/gallery_props.js
+++ b/src/pages/qcomps/gallery_props.js
@@ -1,55 +1,51 @@
+function Profile(props) {
+  return <section className="profile">
+    <h2>{props.name}</h2>
+    <img
+      className="avatar"
+      src={props.src}
+      alt={props.alt}
+      width={70}
+      height={70}
+    />
+    <ul>
+      <li>
+        <b>Profession: </b>
+        {props.profession}
+      </li>
+      <li>
+        <b>Awards: {props.awardsCount} </b>
+        {props.awardsList}
+      </li>
+      <li>
+        <b>Discovered: </b>
+        {props.discovered}
+      </li>
+    </ul>
+  </section>
+}
 export default function Gallery() {
   return (
     <div>
       <h1>Notable Scientists</h1>
-      <section className="profile">
-        <h2>Maria Skłodowska-Curie</h2>
-        <img
-          className="avatar"
-          src='https://i.imgur.com/szV5sdGs.jpg'
-          alt="Maria Skłodowska-Curie"
-          width={70}
-          height={70}
-        />
-        <ul>
-          <li>
-            <b>Profession: </b>
-            physicist and chemist
-          </li>
-          <li>
-            <b>Awards: 4 </b>
-            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
-          </li>
-          <li>
-            <b>Discovered: </b>
-            polonium (element)
-          </li>
-        </ul>
-      </section>
-      <section className="profile">
-        <h2>Katsuko Saruhashi</h2>
-        <img
-          className="avatar"
-          src='https://i.imgur.com/YfeOqp2s.jpg'
-          alt="Katsuko Saruhashi"
-          width={70}
-          height={70}
-        />
-        <ul>
-          <li>
-            <b>Profession: </b>
-            geochemist
-          </li>
-          <li>
-            <b>Awards: 2 </b>
-            (Miyake Prize for geochemistry, Tanaka Prize)
-          </li>
-          <li>
-            <b>Discovered: </b>
-            a method for measuring carbon dioxide in seawater
-          </li>
-        </ul>
-      </section>
+      <Profile
+        name="Maria Skłodowska-Curie"
+        src='https://i.imgur.com/szV5sdGs.jpg'
+        alt="Maria Skłodowska-Curie"
+        profession="physicist and chemist"
+        awardsCount={4}
+        awardsList="(Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)"
+        discovered="polonium (element)"
+      />
+      <Profile
+        name="Katsuko Saruhashi"
+        src='https://i.imgur.com/YfeOqp2s.jpg'
+        alt="Katsuko Saruhashi"
+        profession="geochemist"
+        awardsCount={2}
+        awardsList="(Miyake Prize for geochemistry, Tanaka Prize)"
+        discovered="a method for measuring carbon dioxide in seawater"
+      />
     </div>
   );
 }
diff --git a/src/pages/qcomps/profile_mistake.js b/src/pages/qcomps/profile_mistake.js
index ac318d70..b35fb3ad 100644
--- a/src/pages/qcomps/profile_mistake.js
+++ b/src/pages/qcomps/profile_mistake.js
@@ -1,4 +1,3 @@
 export default function profile() {
-    return
-        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+    return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
 }
diff --git a/src/pages/qcomps/props_item.js b/src/pages/qcomps/props_item.js
index 79a9e151..02431694 100644
--- a/src/pages/qcomps/props_item.js
+++ b/src/pages/qcomps/props_item.js
@@ -1,8 +1,5 @@
 function Item({ name, isPacked }) {
-  if (isPacked) {
-    return <li className="item">{name} ✔</li>;
-  }
-  return <li className="item"> {name} </li>
+  return <li className="item"> {isPacked ? <del>name</del> : name} </li>
 }
 
 export default function PackingList() {
diff --git a/src/pages/qcomps/todos.js b/src/pages/qcomps/todos.js
index 99713488..aff9b741 100644
--- a/src/pages/qcomps/todos.js
+++ b/src/pages/qcomps/todos.js
@@ -9,13 +9,13 @@ const person = {
   }
 };
 
-export default function TodoList() {
+export default function TodoList(props) {
   return (
     <div style={person.theme}>
       <h1>Person Name's Todos</h1>
       <img className="avatar"
-      src="baseURL + imageID + imageSize + .jpg"
-      alt="Person's Name"
+        src={baseUrl + person.imageID + person.imageSize + ".jpg"}
+        alt="Person's Name"
       />
     </div>
   );