diff --git a/app/about_us/OurCrew.js b/app/about_us/OurCrew.js new file mode 100644 index 00000000..ef788bf5 --- /dev/null +++ b/app/about_us/OurCrew.js @@ -0,0 +1,46 @@ +import styles from "./page.module.css" + +const OurCrew = () => { + return ( +
+

Our Team

+

Who we are

+

+ Our crew is the heart and soul of Galactica. We are a diverse team of seasoned space explorers, engineers, and visionaries who are united by a common goal: to make space travel accessible and exciting for all. +

+ +
+
+ +
Anousheh Ansari
+
Founder + CEO
+
+ +
+ +
Mark Shuttleworth
+
Founder + CEO
+
+ +
+ +
Douglas Hurley
+
Founder + CEO
+
+ +
+ +
Victor Glover
+
Founder + CEO
+
+ +
+
+ + + + ); + } + + + export default OurCrew; \ 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..fd1e794f --- /dev/null +++ b/app/about_us/OurPartners.js @@ -0,0 +1,39 @@ +import styles from "./page.module.css" +const OurPartners = () => { + return ( +
+

Our Partners

+

We Collaborate with progressive, ambitious brands we believe in.

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ ); + } + + export default OurPartners; \ 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..9f6f2f0d --- /dev/null +++ b/app/about_us/OurValues.js @@ -0,0 +1,37 @@ +import styles from "./page.module.css" + +const OurValues = () => { + + return ( +
+

Our Values

+

Rules to live by

+ +
+
+

01

+

Love your craft

+

Exploration: We are driven by a deep-seated desire to explore the unknown. We believe that the pursuit of discovery is at the heart of human nature, and we are committed to pushing the boundaries of what is possible.

+
+
+

02

+

Be bold. Be humble.

+

Innovation: At Galactica, we prioritize cutting-edge technology and innovation. We are constantly evolving our spacecraft, safety protocols, and services to ensure that our travelers experience the most advanced and secure space journeys available.

+
+
+

03

+

Be better. Always push forward.

+

Sustainability: We are committed to making space exploration sustainable for future generations. Our space missions are designed to minimize environmental impact, both on Earth and in space, and to foster a spirit of responsibility towards our universe.

+
+
+

04

+

Be a Professional

+

Community: We believe in the power of collective exploration. Our journeys are not just about reaching new destinations; they are about building a community of space enthusiasts who share a passion for the stars.

+
+
+
+ + ); + }; + + export default OurValues; \ No newline at end of file diff --git a/app/about_us/page.js b/app/about_us/page.js index 880ec427..cdcc8243 100644 --- a/app/about_us/page.js +++ b/app/about_us/page.js @@ -1,41 +1,6 @@ -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'; +import OurCrew from "./OurCrew" +import OurPartners from './OurPartners'; export const Crew = () => { @@ -44,16 +9,14 @@ export const Crew = () => {

About us

-

Our Values

-

The crew

- + +
+
+
- - {/* TASK - React 1 week 1 */} - {/* Add in the "OurPartners" component here */}
); diff --git a/app/about_us/page.module.css b/app/about_us/page.module.css index 8cd08626..9022b1da 100644 --- a/app/about_us/page.module.css +++ b/app/about_us/page.module.css @@ -3,3 +3,81 @@ width: 100vw; height: 100vh; } + +/*Our Values*/ +.valuesContainer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 30px; + max-width: 1000px; + margin: auto; +} + +.valueBox { + flex: 1 1 calc(50% - 20px); + background: black; + padding: 20px; + border-radius: 10px; + min-width: 200px; +} + +.valueBox h2 { + font-size: 30px; + margin-bottom: 10px; +} + +.valueBox h3 { + font-size: 24px; + margin-bottom: 10px; +} + +.valueBox p { + font-size: 16px; +} + + +/*Our Crew*/ + +.crewContainer{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 100px; + +} + + +.crewBox img{ + height: 300px; + width: 200px; + +} + + +/*Our Partners*/ + +.pContainer{ + background-color: black; +} + +.partnersContainer{ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 20px; + padding: 20px; +} + +.partnersBox { + flex: 1 1 calc(33.33% - 20px); + display: flex; + justify-content: center; + align-items: center; +} + +.partnersBox img { + max-width: 160px; + height: auto; +} \ No newline at end of file diff --git a/app/destination/page.js b/app/destination/page.js index 006037be..93b9e8ce 100644 --- a/app/destination/page.js +++ b/app/destination/page.js @@ -1,110 +1,109 @@ -"use client"; -import { useState } from 'react'; +"use client"; -import styles from '@/components/destination/destination.module.css'; -import { AddWishlistItem } from '@/components/destination/AddWishlistItem'; +import { useState } from "react"; +import styles from "@/components/destination/destination.module.css"; +import {AddWishlistItem} from "../../components/destination/AddWishlistItem"; +import PlanetCard from "../../components/destination/PlanetCard"; +import PlanetWishListItem from "../../components/destination/PlanetWishListItem"; -// TASK - React 1 week 2 -// Move this to its own file -const PlanetWishlistItem = ({ - name, - onRemove, - thumbnail, -}) => { - return ( -
- - {name.toUpperCase()} - -
- ); -} +const planetData = [ + { + name: "Europa", + description: "Europa, one of Jupiter’s moons...", + thumbnail: "/destination/image-europa.png", + isSelected: false, + }, + { + name: "Mars", + description: "Mars, the Red Planet...", + thumbnail: "/destination/image-mars.png", + isSelected: false, + }, + { + name: "Moon", + description: "The Moon, Earth's only natural satellite....", + thumbnail: "/destination/image-moon.png", + isSelected: false, + }, + { + name: "Titan", + description: "Titan, Saturn’s largest moon..", + thumbnail: "/destination/image-titan.png", + isSelected: false, + } +]; export const Destinations = () => { - const [selectedPlanets, onAddPlanet] = useState([]); + const [planets, setPlanets] = useState(planetData); + const selectedPlanets = planets.filter(planet => planet.isSelected); + - 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) +const onAddOrRemovePlanet = (name,index) => { + setPlanets((prevPlanets) =>{ + return prevPlanets.map((planet) => { + return planet.name === name + ? { ...planet, isSelected: !planet.isSelected } + : planet + }); + }); console.log(`You seleceted the following planet: ${name}, with the index of ${index}`); - } + }; + + + const numberOfPlanets = selectedPlanets.length; + + const removeFromWishlist = (name) => { + onAddOrRemovePlanet(name); + }; + + const handleAddWishlistItem = (newPlanet) => { + setPlanets((prevPlanets) => [...prevPlanets, newPlanet]); + }; return (
+

Travel destinations

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

+ {numberOfPlanets === 0 ? ( +

No planets in wishlist :

+ ) : ( +

You have {numberOfPlanets} planets in your wishlist.

+ )} List coming soon after lesson 3! +
+ +
+

Possible destinations

+ {planets.map((planet) => ( + onAddOrRemovePlanet(planet.name)} + /> + ))} + + - {/* 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" - /> -
*/} -
-
-

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...

-
- + {selectedPlanets.map((planet) => ( + removeFromWishlist(planet.name)} + /> + ))}
+
diff --git a/app/layout.js b/app/layout.js index 87ee54a8..45f459aa 100644 --- a/app/layout.js +++ b/app/layout.js @@ -17,9 +17,8 @@ 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 */} + + ); diff --git a/app/nasa_collaboration/page.js b/app/nasa_collaboration/page.js index dc31e21f..6f435712 100644 --- a/app/nasa_collaboration/page.js +++ b/app/nasa_collaboration/page.js @@ -2,10 +2,11 @@ import React, { useState, useEffect } from 'react'; import styles from './page.module.css'; +import RoverPhotos from '@/components/nasaCollaboration/RoverPhoto'; // Read "/app/nasa_collaboration/README.md" for more info about the API_KEY // You need a proper API_KEY for the requests to work -const API_KEY = 'API_KEY'; +const API_KEY = 'U4Fa0QGbbNH4cEh0u0NdUGglk2fb5G6RrjlG5oHG'; const NASA_URLs = { astronomyPicOfTheDay: `https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`, @@ -20,12 +21,19 @@ export const NasaCollaboration = () => { const fetchRoverPhotos = async () => { const roverPhotoResponse = await fetch(NASA_URLs.marsRoverPhoto).then(response => response.json()); setRoverPhoto(roverPhotoResponse); + console.log(roverPhotoResponse) }; fetchRoverPhotos(); - // TASK - React 1 week 3 - // fetch the extra data for NASA_URLs.astronomyPicOfTheDay and save it to the dailyImg state variable + + const fetchApodPhotos = async () => { + const apodResponse = await fetch(NASA_URLs.astronomyPicOfTheDay) + const data = await apodResponse.json() + setDailyImg(data) + }; + + fetchApodPhotos(); }, []); return ( @@ -34,30 +42,30 @@ export const NasaCollaboration = () => {

Collaboration with NASA

Astronomy Picture of the day

- {/* TASK - React 1 week 3 */} - {/* After fetching data from the NASA_URLs.astronomyPicOfTheDay url, display the returned data here */} - {/* You should display the title, explanation, and the image using the url from the response */} - {/* */} +

{dailyImg.title}

+

{dailyImg.explanation}

+

Rover Photos

- {/* TASK - React 1 week 3 */} - {/* Iteratate over the roverPhoto?.photos array and display all the pictures! */} { + roverPhoto?.photos?.length ? ( + <> - {/* TASK - React 1 week 3 */} - {/* Create a react component for the , which should accept the following props */} - {/* 1. src: source of the img (img_src in the data from the API) */} - {/* 2. date: earth_date data coming from the API */} - {/* 3. roverName: will be in the rover object - rover.name */} + {roverPhoto?.photos?.map((photo) => { + + return( + + ); + })} + - {/* TIPS: */} - {/* If you don't know how the data looks like you can: */} - {/* 1. use console.log() to write the data to the console */} - {/* 2. use the network tab in the developer tab - https://developer.chrome.com/docs/devtools/network */} -

Date {roverPhoto.photos[0]?.earth_date}

- {dailyImg.title} ) : (

Loading rover photos...

diff --git a/components/destination/AddWishlistItem.js b/components/destination/AddWishlistItem.js index fe9b5a72..6ec3feb4 100644 --- a/components/destination/AddWishlistItem.js +++ b/components/destination/AddWishlistItem.js @@ -7,16 +7,11 @@ export const AddWishlistItem = ({ onAddWishlistItem, }) => { const [thumbnail, onThumbnailChange] = useState('/destination/image-europa.png'); - // TASK - React 1 week 3 - // 1. Add a useState for the handling the - // 2. Connect the onThumbnailChange to the field on button press - // pass the thumbnail and the name from the input to the onAddWishlistItem function - // call the onAddWishlistItem here + onAddWishlistItem({ name: name, thumbnail:thumbnail }); + setName(''); } @@ -24,15 +19,15 @@ export const AddWishlistItem = ({

Add custom planet to wishlist

- + setName(e.target.value)}/> - onThumbnailChange(e.target.value)}> - +
); }; diff --git a/components/destination/PlanetCard.js b/components/destination/PlanetCard.js new file mode 100644 index 00000000..64fcdcc9 --- /dev/null +++ b/components/destination/PlanetCard.js @@ -0,0 +1,29 @@ +import styles from "./destination.module.css"; + +const PlanetCard = ({ + name, + description, + thumbnail, + isSelected, + onAddOrRemovePlanet, +}) => { + return ( +
+ {name} +
+

+ {name} {isSelected ? "Selected" : ""} +

+

{description}

+
+ +
+ ); +}; + +export default PlanetCard; \ No newline at end of file diff --git a/components/destination/PlanetWishListItem.js b/components/destination/PlanetWishListItem.js new file mode 100644 index 00000000..05dbf959 --- /dev/null +++ b/components/destination/PlanetWishListItem.js @@ -0,0 +1,17 @@ +import styles from '@/components/destination/destination.module.css'; + +const PlanetWishlistItem = ({ + name, + onRemove, + thumbnail, + }) => { + return ( +
+ + {name} + +
+ ); + } + + export default PlanetWishlistItem; \ No newline at end of file diff --git a/components/nasaCollaboration/RoverPhoto.js b/components/nasaCollaboration/RoverPhoto.js new file mode 100644 index 00000000..1dffe632 --- /dev/null +++ b/components/nasaCollaboration/RoverPhoto.js @@ -0,0 +1,12 @@ +const RoverPhotos = ({src,date,roverName}) => { + return( + <> + +

Date: {date}

+

RoverName: {roverName}

+ + ); +} + + +export default RoverPhotos; \ No newline at end of file diff --git a/components/ui/Footer.js b/components/ui/Footer.js index eed82876..0e886fb1 100644 --- a/components/ui/Footer.js +++ b/components/ui/Footer.js @@ -2,6 +2,8 @@ import { usePathname } from 'next/navigation'; import styles from './Footer.module.css'; +import Link from 'next/link' +import SocialMediaItem from "./SocialMediaItem"; export const Footer = () => { const path = usePathname().split('?')[0]; @@ -12,40 +14,46 @@ export const Footer = () => {

Explore the universe and beyond. Your journey to the stars starts here.

© 2024 Galactica. All rights reserved.

- {/* TASK - React 1 week 2 */} - {/* Create a new List for the Pages */} - {/* We need to use the component here */} - {/*
+ +

Pages

    -
    • - ... +
  • About us
    • +
  • Destination
    • +
  • Nasa collaboration
-
*/} - {/* Docs for the Link: https://nextjs.org/docs/pages/api-reference/components/link */} +
- {/* TASK - React 1 week 1 */} - {/* Add a new list item for LINKEDIN */} +

Follow us

    -
  • - Facebook -
    • -
  • - Instagram -
    • -
  • - Tiktok -
    • -
  • - On the streets at night -
    • - {/* TASK - React 1 week 2 */} - {/* Create a component and replace all of the list items! */} - {/* it should accept the following props */} - {/* url, title, icon */} - {/* For the icons, you can download 1-2 social media icons for testing and put it in the /public/socialmedia/ folder */} + + + + +
diff --git a/components/ui/Navbar.js b/components/ui/Navbar.js index 3868afc5..38506b54 100644 --- a/components/ui/Navbar.js +++ b/components/ui/Navbar.js @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { usePathname } from 'next/navigation'; import Link from 'next/link' - +import NavItem from "./navItem"; import styles from './Navbar.module.css'; const navbarItems = [ @@ -32,24 +32,17 @@ export const Navbar = () => {