diff --git a/app/about_us/Boulder_Worldcup_Vienna_28-05-2010_quali-w100_Alex_Johnson.jpg b/app/about_us/Boulder_Worldcup_Vienna_28-05-2010_quali-w100_Alex_Johnson.jpg new file mode 100644 index 00000000..94784464 Binary files /dev/null and b/app/about_us/Boulder_Worldcup_Vienna_28-05-2010_quali-w100_Alex_Johnson.jpg differ diff --git a/app/about_us/D52_5662.jpg b/app/about_us/D52_5662.jpg new file mode 100644 index 00000000..fef96b8a Binary files /dev/null and b/app/about_us/D52_5662.jpg differ diff --git a/app/about_us/Jordan-M-Smith.webp b/app/about_us/Jordan-M-Smith.webp new file mode 100644 index 00000000..69e2fc92 Binary files /dev/null and b/app/about_us/Jordan-M-Smith.webp differ diff --git a/app/about_us/Morgan.webp b/app/about_us/Morgan.webp new file mode 100644 index 00000000..ad3f328c Binary files /dev/null and b/app/about_us/Morgan.webp differ diff --git a/app/about_us/OurCrew.js b/app/about_us/OurCrew.js new file mode 100644 index 00000000..4de1cf03 --- /dev/null +++ b/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 ( +
+
+ {crewMembers.map((member, index) => ( +
+ {member.name} +

{member.name}

+

{member.role}

+
+ ))} +
+
+ ); + }; \ No newline at end of file diff --git a/app/about_us/OurPartners.js b/app/about_us/OurPartners.js new file mode 100644 index 00000000..3e942923 --- /dev/null +++ b/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 ( +
+
+ {partners.map((partner, index) => ( +
+ {partner.name} +

{partner.name}

+
+ ))}; +
+
+ ); + }; + \ No newline at end of file diff --git a/app/about_us/OurValues.js b/app/about_us/OurValues.js new file mode 100644 index 00000000..9e9df7b6 --- /dev/null +++ b/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 ( +
+
+ {values.map((value, index) => ( +
+

{value.title}

+

{value.description}

+
+ ))} +
+
+ ); + }; \ No newline at end of file diff --git a/app/about_us/Taylor-Lee-scaled.jpg b/app/about_us/Taylor-Lee-scaled.jpg new file mode 100644 index 00000000..a031576e Binary files /dev/null and b/app/about_us/Taylor-Lee-scaled.jpg differ diff --git a/app/about_us/page.js b/app/about_us/page.js index 880ec427..8019e203 100644 --- a/app/about_us/page.js +++ b/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 ( -

ADD OUR VALUES HERE

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

ADD OUR CREW HERE

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

ADD OUR Partners HERE

- ); -} +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 = () => {

The crew

- - {/* TASK - React 1 week 1 */} - {/* Add in the "OurPartners" component here */} +
+

Our Partners

+ +
); diff --git a/app/destination/page.js b/app/destination/page.js index 006037be..da02fd56 100644 --- a/app/destination/page.js +++ b/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 ( -
- - {name.toUpperCase()} - -
- ); -} +import { AddWishlistItem } from '@/components/destination/AddWishlistItem'; // Assuming this exists +// Planet Wishlist Item Component +const PlanetWishlistItem = ({ name, onRemove, thumbnail }) => ( +
+ {`Thumbnail + {name.toUpperCase()} + +
+); 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 (

Travel destinations

+ + {/* Wishlist Section */}

Wishlist

- {/* TASK - React 1 week 2 */} - {/* Display the number Of selected planets */} - {/* Display the "no planets" message if it is empty! */} -

No planets in wishlist :(

-

You have {numberOfPlanets} in your wishlist

- List coming soon after lesson 3! - - {/* STOP! - this is for week 3!*/} - {/* TASK - React 1 week 3 */} - {/* Import the AddWishlistItem react component */} - {/* */} - {/* 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: */} - {/* -

Your current wishlist

-
- removeFromWishlist('europa')} - thumbnail="/destination/image-europa.png" - /> - removeFromWishlist('europa')} - thumbnail="/destination/image-europa.png" - /> -
*/} + {selectedPlanets.length === 0 ? ( +

No planets in wishlist :(

+ ) : ( + <> +

You have {selectedPlanets.length} planet(s) in your wishlist:

+
+ {selectedPlanets.map((planet) => ( + removeFromWishlist(planet)} + thumbnail={`/destination/image-${planet.toLowerCase()}.png`} + /> + ))} +
+ + )}
+ + {/* Optional AddWishlistItem Component */} + {/* If you want to use this component */} + + {/* Possible Destinations Section */}
-

Possible destinations

- {/* TASK - React 1 week 2 */} - {/* Add all 4 planets! Europa, Moon, Mars, Titan */} - {/* Use the README.md file for descriptions */} - {/* Create a component, which accepts the following properties: */} - {/* name, description, thumbnail, isSelected, onAddOrRemovePlanet */} -
- -
-

EUROPA {isPlanetSelected ? "- SELECTED" : ""}

-

Lorem ipsum...

-
- -
-
- -
-

EUROPA {isPlanetSelected ? "- SELECTED" : ""}

-

Lorem ipsum...

-
- +

Possible Destinations

+
+ {planets.map((planet) => { + const isSelected = selectedPlanets.includes(planet.name); + return ( +
+ {planet.name} +
+

+ {planet.name} {isSelected ? "- SELECTED" : ""} +

+

{planet.description}

+
+ +
+ ); + })}
); -} +}; export default Destinations; diff --git a/app/layout.js b/app/layout.js index 87ee54a8..3b5d987e 100644 --- a/app/layout.js +++ b/app/layout.js @@ -17,9 +17,7 @@ export const RootLayout = ({ children }) => { {children} - {/* TASK - React 1 week 1 */} - {/* Import and use the Footer component here */} - {/* Footer found in the ui/Footer.js folder */} +