React week2/amin

app/destination/PlanetCard.jsx

@@ -0,0 +1,24 @@
+import styles from "./destination.module.css";
+
+export default function PlanetCard({
+  name,
+  description,
+  thumbnail,
+  isSelected,
+  onAddOrRemovePlanet,
+}) {
+  return (
+    <div className={styles.planetCard}>
+      <img className={styles.planetThumbnail} src={thumbnail} alt={name} />
+      <div className={styles.planetDescription}>
+        <h2>
+          {name.toUpperCase()} {isSelected ? "- SELECTED" : ""}
+        </h2>
+        <p>{description}</p>
+      </div>
+      <button className="roundButton" onClick={() => onAddOrRemovePlanet(name)}>
+        {isSelected ? "REMOVE" : "ADD PLANET"}
+      </button>
+    </div>
+  );
+}

app/destination/destination.module.css

@@ -0,0 +1,25 @@
+.planetGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.planetCard {
+  background-color: #14213d;
+  color: white;
+  padding: 1rem;
+  border-radius: 8px;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.planetThumbnail {
+  width: 100%;
+  max-width: 180px;
+  border-radius: 4px;
+}
+
+.planetDescription {
+  margin: 1rem 0;
+}

app/destination/destinations.js

@@ -0,0 +1,24 @@
+const destinations = [
+  {
+    name: "Europa",
+    description: "Europa is an icy moon of Jupiter with a hidden ocean.",
+    thumbnail: "/destination/image-europa.png"
+  },
+  {
+    name: "Moon",
+    description: "The Moon is Earth's natural satellite and our closest neighbor.",
+    thumbnail: "/destination/image-moon.png"
+  },
+  {
+    name: "Mars",
+    description: "Mars is the red planet with dusty landscapes and big dreams.",
+    thumbnail: "/destination/image-mars.png"
+  },
+  {
+    name: "Titan",
+    description: "Titan is Saturn's largest moon, with a thick atmosphere and methane lakes.",
+    thumbnail: "/destination/image-titan.png"
+  }
+];
+
+export default destinations;

app/destination/page.js

@@ -1,114 +1,51 @@
 "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>
-  );
-}
-
-
-export const Destinations = () => {
-  const [selectedPlanets, onAddPlanet] = useState([]);
-
-  let isPlanetSelected = false;
-  let numberOfPlanets = 0;
-
-  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}`);
-  }
+import { useState } from "react";
+import destinations from "@/./app/destination/destinations";
+import PlanetCard from "@/app/destination/PlanetCard";
+import styles from "@/app/destination/destination.module.css";
+
+export default function DestinationsPage() {
+  const [selectedPlanets, setSelectedPlanets] = useState([]);
+
+  const onAddOrRemovePlanet = (name) => {
+    if (selectedPlanets.includes(name)) {
+      setSelectedPlanets(selectedPlanets.filter((planet) => planet !== name));
+    } else {
+      setSelectedPlanets([...selectedPlanets, name]);
+    }
+  };
 
   return (
     <div className="fullBGpicture">
       <main className="mainContent">
-        <h1>Travel destinations</h1>
+        <h1>Travel Destinations</h1>
+
         <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} in your wishlist</p>
+          )}
         </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.planetGrid}>
+            {destinations.map((planet) => (
+              <PlanetCard
+                key={planet.name}
+                name={planet.name}
+                description={planet.description}
+                thumbnail={planet.thumbnail}
+                isSelected={selectedPlanets.includes(planet.name)}
+                onAddOrRemovePlanet={onAddOrRemovePlanet}
+              />
+            ))}
           </div>
         </section>
       </main>
     </div>
   );
 }
-
-export default Destinations;