020924 changes

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"
   }
-}
+}

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 PackingList from './qcomps/props_item'
 
 export default function Home() {
   return (
     <div className={styles.main}>
-        <Profile />
+      <PackingList />
     </div>
   )
 }

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>
   );
 }

src/pages/qcomps/firstcomp.js

@@ -1 +1,12 @@
-function MyComp() {}
+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>
+    );
+}

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>
   );
 }

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" />;
 }

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() {

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>
   );