React1 week3/parisa

app/about_us/OurCrew.js

@@ -0,0 +1,25 @@
+const OurCrew = () => {
+    const crewMembers = [
+      { name: "Alex Johnson", role: "Captain", image: "react-1-hw/app/about_us/Boulder_Worldcup_Vienna_28-05-2010_quali-w100_Alex_Johnson.jpg" },
+      { name: "Jordan Smith", role: "Engineer", image: "D:\HYF\Homework\class30-homework\react\react1\week1\react-1-hw\app\about_us\D52_5662.jpg" },
+      { name: "Taylor Lee", role: "Navigator", image: "D:\HYF\Homework\class30-homework\react\react1\week1\react-1-hw\app\about_us\Taylor-Lee-scaled.jpg" },
+      { name: "Morgan Davis", role: "Communications", image: "D:\HYF\Homework\class30-homework\react\react1\week1\react-1-hw\app\about_us\Morgan.webp"},
+    ];
+
+    return (
+      <section className="Crews">
+        <div>
+          {crewMembers.map((member, index) => (
+            <div key={index}>
+              <img
+                src={member.image}
+                alt={member.name}
+              />
+              <h3>{member.name}</h3>
+              <p>{member.role}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  };

app/about_us/OurPartners.js

@@ -0,0 +1,24 @@
+const OurPartners = () => {
+    const partners = [
+      { name: "TechCorp", logo: "/partners/techcorp.png" },
+      { name: "InnovateX", logo: "/partners/innovatex.png" },
+    ];
+
+    return (
+      <section className="partners">
+        <div>
+          {partners.map((partner, index) => (
+            <div key={index}>
+              <img
+                src={partner.logo}
+                alt={partner.name}
+
+              />
+              <h3>{partner.name}</h3>
+            </div>
+          ))};
+        </div>
+      </section>
+    );
+  };
+

app/about_us/OurValues.js

@@ -0,0 +1,20 @@
+const OurValues = () => {
+    const values = [
+      { title: "Integrity", description: "We uphold the highest standards of honesty and ethics in all we do." },
+      { title: "Innovation", description: "We embrace creativity and strive for continuous improvement." },
+      { title: "Collaboration", description: "We work together to achieve more than we could alone." },
+      { title: "Customer Focus", description: "Our customers are at the center of everything we do." },
+    ];
+    return (
+    <section className="values">
+      <div>
+      {values.map((value, index) => (
+            <div key={index}>
+              <h3>{value.title}</h3>
+              <p>{value.description}</p>
+            </div>
+          ))}
+      </div>
+    </section>
+    );
+  };

app/about_us/page.js

@@ -1,41 +1,7 @@
 import styles from './page.module.css';
-
-// TASK - React 1 week 1
-// After you are finished with creating the page, move the OurValues, OurCrew, OurPartners components into their own files
-// OurValues.js, OurCrew.js, OurPartners.js should live in this folder
-// import and use the components from the newly created files
-
-const OurValues = () => {
-  // TASK - React 1 week 1
-  // Create the "Our Values" section
-  // Use the descriptions provided in /app/about_us/README.md
-  // Some inspiration ideas found in /data/inspiration_about_us
-  return (
-    <p> ADD OUR VALUES HERE </p>
-  );
-};
-
-const OurCrew = () => {
-  // TASK - React 1 week 1
-  // Create the "Our Crew section"
-  // Use the descriptions provided in /app/about_us/README.md
-  // Use the pictures from /public/crew
-  // Some inspiration ideas found in /data/inspiration_about_us
-  return (
-    <p> ADD OUR CREW HERE </p>
-  );
-}
-
-const OurPartners = () => {
-  // TASK - React 1 week 1
-  // Create the "Our Crew section"
-  // Use the descriptions provided in /app/about_us/README.md
-  // Use the pictures from /public/crew
-  // Some inspiration ideas found in /data/inspiration_about_us
-  return (
-    <p> ADD OUR Partners HERE </p>
-  );
-}
+import OurValues from './OurValues.js';
+import OurCrew from './OurCrew.js';
+import OurPartners from './OurPartners.js';
 
 
 export const Crew = () => {
@@ -51,9 +17,10 @@ export const Crew = () => {
           <h2>The crew</h2>
           <OurCrew/>
         </section>
-
-         {/* TASK - React 1 week 1 */}
-         {/* Add in the "OurPartners" component here */}
+        <section className="card">
+          <h2>Our Partners</h2>
+          <OurPartners/>
+        </section>
       </main>
     </div>
   );

app/destination/page.js

@@ -1,114 +1,99 @@
 "use client";
 
 import { useState } from 'react';
-
 import styles from '@/components/destination/destination.module.css';
-import { AddWishlistItem } from '@/components/destination/AddWishlistItem';
-
-// TASK - React 1 week 2
-// Move this to its own file
-const PlanetWishlistItem = ({
-  name,
-  onRemove,
-  thumbnail,
-}) => {
-  return (
-    <div className={styles.wishlistItem}>
-      <img className={styles.wishlistItemThumbnail} src={thumbnail} alt="" />
-      <b>{name.toUpperCase()}</b>
-      <button onClick={onRemove}>remove</button>
-    </div>
-  );
-}
+import { AddWishlistItem } from '@/components/destination/AddWishlistItem'; // Assuming this exists
 
+// Planet Wishlist Item Component
+const PlanetWishlistItem = ({ name, onRemove, thumbnail }) => (
+  <div className={styles.wishlistItem}>
+    <img className={styles.wishlistItemThumbnail} src={thumbnail} alt={`Thumbnail of ${name}`} />
+    <b>{name.toUpperCase()}</b>
+    <button onClick={onRemove}>remove</button>
+  </div>
+);
 
 export const Destinations = () => {
-  const [selectedPlanets, onAddPlanet] = useState([]);
+  const [selectedPlanets, setSelectedPlanets] = useState([]);
 
-  let isPlanetSelected = false;
-  let numberOfPlanets = 0;
+  const onAddOrRemovePlanet = (name) => {
+    setSelectedPlanets((prevPlanets) =>
+      prevPlanets.includes(name)
+        ? prevPlanets.filter((planet) => planet !== name)
+        : [...prevPlanets, name]
+    );
+  };
 
-  const onAddOrRemovePlanet = (name, index) => {
-    // TASK - React 1 week 2
-    // Implement this function
-    // If you press the "ADD PLANET" the selected planet should display "SELECTED"
-    // And the counter should update, how many planets are selected (numberOfPlanets)
-    console.log(`You seleceted the following planet: ${name}, with the index of ${index}`);
-  }
+  const removeFromWishlist = (name) => {
+    setSelectedPlanets((prevPlanets) => prevPlanets.filter((planet) => planet !== name));
+  };
+
+  const planets = [
+    { name: "Europa", thumbnail: "/destination/image-europa.png", description: "Lorem ipsum..." },
+    { name: "Moon", thumbnail: "/destination/image-moon.png", description: "Lorem ipsum..." },
+    { name: "Mars", thumbnail: "/destination/image-mars.png", description: "Lorem ipsum..." },
+    { name: "Titan", thumbnail: "/destination/image-titan.png", description: "Lorem ipsum..." }
+  ];
 
   return (
     <div className="fullBGpicture">
       <main className="mainContent">
         <h1>Travel destinations</h1>
+
+        {/* Wishlist Section */}
         <section className="card">
           <h2>Wishlist</h2>
-          {/* TASK - React 1 week 2 */}
-          {/* Display the number Of selected planets */}
-          {/* Display the "no planets" message if it is empty! */}
-          <p>No planets in wishlist :(</p>
-          <p>You have {numberOfPlanets} in your wishlist</p>
-          <b>List coming soon after lesson 3!</b>
-
-          {/* STOP! - this is for week 3!*/}
-          {/* TASK - React 1 week 3 */}
-          {/* Import the AddWishlistItem react component */}
-          {/* <AddWishlistItem /> */}
-          {/* TASK - React 1 week 3 */}
-          {/* Convert the list, so it is using selectedPlanets.map() to display the items  */}
-          {/* Implement the "REMOVE" function */}
-          {/* uncomment the following code snippet: */}
-          {/* 
-          <h3>Your current wishlist</h3>
-          <div className={styles.wishlistList}>
-            <PlanetWishlistItem 
-              name="europa"
-              onRemove={() => removeFromWishlist('europa')}
-              thumbnail="/destination/image-europa.png"
-            />
-            <PlanetWishlistItem 
-              name="europa"
-              onRemove={() => removeFromWishlist('europa')}
-              thumbnail="/destination/image-europa.png"
-            />
-          </div> */}
+          {selectedPlanets.length === 0 ? (
+            <p>No planets in wishlist :(</p>
+          ) : (
+            <>
+              <p>You have {selectedPlanets.length} planet(s) in your wishlist:</p>
+              <div className={styles.wishlistList}>
+                {selectedPlanets.map((planet) => (
+                  <PlanetWishlistItem
+                    key={planet}
+                    name={planet}
+                    onRemove={() => removeFromWishlist(planet)}
+                    thumbnail={`/destination/image-${planet.toLowerCase()}.png`}
+                  />
+                ))}
+              </div>
+            </>
+          )}
         </section>
+
+        {/* Optional AddWishlistItem Component */}
+        <AddWishlistItem onAddPlanet={onAddOrRemovePlanet} /> {/* If you want to use this component */}
+
+        {/* Possible Destinations Section */}
         <section className="card">
-          <h2>Possible destinations</h2>
-          {/* TASK - React 1 week 2 */}
-          {/* Add all 4 planets! Europa, Moon, Mars, Titan  */}
-          {/* Use the README.md file for descriptions */}
-          {/* Create a <PlanetCard /> component, which accepts the following properties: */}
-          {/* name, description, thumbnail, isSelected, onAddOrRemovePlanet */}
-          <div className={styles.planetCard}>
-            <img className={styles.planetThumbnail} src="/destination/image-europa.png" alt="" />
-            <div className={styles.planetDescription}>
-              <h2>EUROPA {isPlanetSelected ? "- SELECTED" : ""}</h2>
-              <p>Lorem ipsum...</p>
-            </div>
-            <button 
-              className="roundButton" 
-              onClick={() => onAddOrRemovePlanet('Pluto', 0)}
-            > 
-              {isPlanetSelected ? "REMOVE" : "ADD PLANET"}
-            </button>
-          </div>
-          <div className={styles.planetCard}>
-            <img className={styles.planetThumbnail} src="/destination/image-europa.png" alt="" />
-            <div className={styles.planetDescription}>
-              <h2>EUROPA {isPlanetSelected ? "- SELECTED" : ""}</h2>
-              <p>Lorem ipsum...</p>
-            </div>
-            <button 
-              className="roundButton" 
-              onClick={() => onAddOrRemovePlanet('Pluto', 0)}
-            > 
-              {isPlanetSelected ? "REMOVE" : "ADD PLANET"}
-            </button>
+          <h2>Possible Destinations</h2>
+          <div className={styles.planetContainer}>
+            {planets.map((planet) => {
+              const isSelected = selectedPlanets.includes(planet.name);
+              return (
+                <div key={planet.name} className={styles.planetCard}>
+                  <img className={styles.planetThumbnail} src={planet.thumbnail} alt={planet.name} />
+                  <div className={styles.planetDescription}>
+                    <h2>
+                      {planet.name} {isSelected ? "- SELECTED" : ""}
+                    </h2>
+                    <p>{planet.description}</p>
+                  </div>
+                  <button
+                    className="roundButton"
+                    onClick={() => onAddOrRemovePlanet(planet.name)}
+                  >
+                    {isSelected ? "REMOVE" : "ADD PLANET"}
+                  </button>
+                </div>
+              );
+            })}
           </div>
         </section>
       </main>
     </div>
   );
-}
+};
 
 export default Destinations;

app/layout.js

@@ -17,9 +17,7 @@ export const RootLayout = ({ children }) => {
       <body className={inter.className}>
         <Navbar />
         {children}
-        {/* TASK - React 1 week 1 */}
-        {/* Import and use the Footer component here */}
-        {/* Footer found in the ui/Footer.js folder */}
+      <Footer/>
       </body>
     </html>
   );