Revamped React 1

.gitignore

@@ -0,0 +1 @@
+.DS_Store

react1/homework/app/nasa_collaboration/README.md

@@ -0,0 +1,25 @@
+## Generating an API_KEY
+
+You need to generate an API Key at NASA's website!
+
+>> Link to the NASA API: https://api.nasa.gov/
+
+After subscribing, you will receive an email with your API_KEY
+Overwrite the `API_KEY` variable with your `API_KEY` from the email. It should look like this:
+```
+const API_KEY = 'hlcFvEJEPXDr9eUJ7fMHpbsX.....h9V';
+```
+
+If you did it successfully, the rover photo should load after reload
+
+## TIPS:
+
+There is a limit per user for this API. You can fetch an API 30 times/hour or 50 times/ day. If you get a `429` error message in the console it is because of this.
+
+You can use another email to get a new `API_KEY` or use the "../../data/mock_data.json" to import the data, but fetch doesn't work with a `.json` file
+
+The `.json` file represents the data only. So it can be used to display the components, but not for the fetch.
+
+### How to use the JSON file:
+
+https://docs.deno.com/examples/importing-json/

react1/homework/components/ui/Navbar.js

@@ -0,0 +1,56 @@
+"use client"
+import { usePathname } from 'next/navigation';
+import Link from 'next/link'
+
+import styles from './Navbar.module.css';
+
+const navbarItems = [
+  {
+    title: 'ABOUT US',
+    link: '/about_us',
+  },
+  {
+    title: 'DESTINATION',
+    link: '/destination',
+  },
+  {
+    title: 'NASA COLLABORATION',
+    link: '/nasa_collaboration',
+  }
+];
+
+export const Navbar = () => {
+  const currentPath = usePathname();
+
+  const isLinkActive = (link) => {
+    return link === currentPath ? 'active' : undefined;
+  };
+
+  return (
+    <header className={styles.headerContainer}>
+      <div className={styles.navbarLogo}>
+        <a href="/"><img src="/shared/logo.svg" alt="" /> GALACTICA</a>
+      </div>
+      <div className={styles.decorativeLine} />
+      <nav className={styles.navbar}>
+        <div className={styles.navbarBG} />
+        <ul className={styles.navbarList}>
+          {/* TASK - React 1 week 2 */}
+          {/* Create a <NavItem> component, which accepts the following:  */}
+          {/* title, link, isActive  */}
+          <li is-active={isLinkActive(navbarItems[0].link)} className={styles.navbarLinks}>
+            <Link href={navbarItems[0].link}><b>01</b> {navbarItems[0].title}</Link>
+          </li>
+          <li is-active={isLinkActive(navbarItems[1].link)} className={styles.navbarLinks}>
+            <Link href={navbarItems[1].link}><b>02</b> {navbarItems[1].title}</Link>
+          </li>
+          <li is-active={isLinkActive(navbarItems[2].link)} className={styles.navbarLinks}>
+            <Link href={navbarItems[2].link}><b>03</b> NASA COLLABORATION</Link>
+          </li>
+          {/* TASK - React 1 week 3 */}
+          {/* replace repeating content by using navbarItems.map(() => <NavLink />) */}
+        </ul>
+      </nav>
+    </header>
+  );
+}

react1/homework/components/ui/Navbar.module.css

@@ -0,0 +1,77 @@
+.headerContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--spacing-16) var(--spacing-40);
+  height: var(--header-height);
+  max-height: var(--header-height);
+  align-items: center;
+  z-index: 10;
+}
+
+.decorativeLine {
+  height: 0.1px;
+  width: 30vw;
+  background-color: #999;
+  margin-inline-end: -60px;
+  z-index: 10;
+}
+
+.navbarLogo {
+  margin-inline-end: var(--spacing-20);
+}
+
+.navbarLogo img {
+  height: 40px;
+}
+
+.navbarLogo a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-20);
+  font-size: large;
+  font-weight: 600;
+  color: #fff;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--spacing-8);
+  margin: var(--spacing-20);
+  background-color: transparent;
+
+}
+
+.navbarBG {
+  position: absolute;
+  width: 100%;
+  height: 60%;
+  backdrop-filter: blur(20px);
+}
+
+.navbarList {
+  position: relative;
+  list-style-type: none;
+  display: flex;
+  padding: 0 var(--spacing-40);
+  gap: var(--spacing-20);
+  z-index: 10;
+}
+
+.navbarLinks a {
+  color: white;
+  text-decoration: none;
+  font-weight: 200;
+  letter-spacing: 1px;
+}
+
+.navbarLinks:hover, .navbarLinks[is-active] {
+  border-block-end: var(--spacing-04) solid var(--border-color);
+  margin-block-end: -4px;
+}

react1/homework/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "space-turism",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "framer-motion": "^11.3.28",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {}
+}

react1/readme.md

@@ -2,10 +2,8 @@
 
 ## In this 3 week module we will learn React!
 
-## Planning
-
-| Week | Topic                                                                                                                                                                                                                                                                                                                                                                                                         | Preparation                         | Lesson plan                         | Homework                      |
-| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------------------- | ----------------------------- |
-| 1.   | [Thinking the React way](https://reactjs.org/docs/thinking-in-react.html)<br> <li> What was the initial problem React solves?<br> Understanding the component model<br> <li> Seeing a website as components<br> <li> Thinking in abstractions<br> JSX transition into building components<br> Setting up the React App (Create-react-app) <br>[Props](https://reactjs.org/docs/components-and-props.html)<br> | [Preparation](week1/preparation.md) | [Lesson plan](week1/lesson-plan.md) | [Homework](week1/homework.md) |
-| 2.   | **Building components** Component tree <br> <li> From sketch of todolist to component tree <br> Stateful logic - Having logic around state <br> List keys <br> Life cycle <br> Lifting state                                                                                                                                                                                                                  | [Preparation](week2/preparation.md) | [Lesson plan](week2/lesson-plan.md) | [Homework](week2/homework.md) |
-| 3.   | **Advanced React** <br> Forms and events <br> Using data fetching <br> Children <br> Prop types                                                                                                                                                                                                                                                                                                               | [Preparation](week3/preparation.md) | [Lesson plan](week3/lesson-plan.md) | [Homework](week3/homework.md) |
+| Week | Topic | Preparation | Lesson plan | Homework |
+| ---- | ----- | ----------- | ----------- | -------- |
+| 1.   | <li>Why React and Next.js? <br><li> Setting up the Next App (Create-next-app) <br><li> Building components using JSX | [Preparation](week1/preparation.md) | [Lesson plan](week1/lesson-plan.md) | [Homework](https://github.com/HackYourFuture-CPH/react-1-hw) |
+| 2.   | <li> Passing props to components <br><li> Managing component state <br><li> Sharing state between components | [Preparation](week2/preparation.md) | [Lesson plan](week2/lesson-plan.md) | [Homework](https://github.com/HackYourFuture-CPH/react-1-hw) |
+| 3.   | <li> Creating input forms <br><li> Rendering a list of components <br><li> Understanding effects and hooks <br><li> Using data from async APIs  | [Preparation](week3/preparation.md) | [Lesson plan](week3/lesson-plan.md) | [Homework](https://github.com/HackYourFuture-CPH/react-1-hw) |

react1/week1/homework.md

@@ -1,34 +1,2 @@
 # Homework
-
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) out before you get into some git confusion!
-
-## Todo list
-
-Using `create-react-app` create a new react project.
-
-## basic React & props
-
-Render a basic static todo list with three items:
-
-```
-Todo List
-
-* Get out of bed, Wed Sep 13 2017
-* Brush teeth, Thu Sep 14 2017
-* Eat breakfast, Fri Sep 15 2017
-```
-
-For each item render a description and a deadline date. Before you start draw a mockup and identify the components with colours. You have to use more than two components. Think which props the components should take.
-
-## thinking in React
-
-go through this article https://www.codestackr.com/blog/5-steps-to-think-in-react/ for learning how to think the react way (hooks updated).
-
-<br/>
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?<br/>
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) to remember how to hand in the homework correctly!
+Solve the week one tasks in the [homework project](/react1/homework/app/about_us/README.md)