add meetup setup

Author: solygambas

README.md

@@ -12,10 +12,12 @@ This repo is made of 3 projects:
 
 [See Demo deployed on Vercel](https://nextevents.vercel.app/)
 
-[See 01-nextevents folder](https://github.com/solygambas/next-course/tree/master/01-nextevents)
+[See 01-nextevents folder](https://github.com/solygambas/next-course/tree/main/01-nextevents)
 
 <p align="center">
-    <img src="01-nextevents/screenshot.png">
+    <a href="https://github.com/solygambas/next-course/tree/main/01-nextevents">
+        <img src="01-nextevents/screenshot.png">
+    </a>
 </p>
 
 ### Features
@@ -28,10 +30,12 @@ This repo is made of 3 projects:
 
 [See Demo deployed on Vercel](https://next-dagny.vercel.app/)
 
-[See 02-blog folder](https://github.com/solygambas/next-course/tree/master/02-blog)
+[See 02-blog folder](https://github.com/solygambas/next-course/tree/main/02-blog)
 
 <p align="center">
-    <img src="02-blog/screenshot.png">
+    <a href="https://github.com/solygambas/next-course/tree/main/02-blog">
+        <img src="02-blog/screenshot.png">
+    </a>
 </p>
 
 ### Features
@@ -42,10 +46,12 @@ This repo is made of 3 projects:
 
 ...
 
-[See 03-dashboard folder](https://github.com/solygambas/next-course/tree/master/03-dashboard)
+[See 03-dashboard folder](https://github.com/solygambas/next-course/tree/main/03-dashboard)
 
 <p align="center">
-    <img src="03-dashboard/screenshot.png">
+    <a href="https://github.com/solygambas/next-course/tree/main/03-dashboard">
+        <img src="03-dashboard/screenshot.png">
+    </a>
 </p>
 
 ### Features

components/auth/auth-form.js

@@ -0,0 +1,5 @@
+.main {
+  margin: 3rem auto;
+  width: 90%;
+  max-width: 40rem;
+}

components/auth/auth-form.module.css

@@ -0,0 +1,22 @@
+import classes from './MainNavigation.module.css';
+
+function MainNavigation() {
+
+  return (
+    <header className={classes.header}>
+      <div className={classes.logo}>React Meetups</div>
+      <nav>
+        <ul>
+          <li>
+            <Link to='/'>All Meetups</Link>
+          </li>
+          <li>
+            <Link to='/new-meetup'>Add New Meetup</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+}
+
+export default MainNavigation;

components/layout/Layout.module.css

@@ -0,0 +1,39 @@
+.header {
+  width: 100%;
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #77002e;
+  padding: 0 10%;
+}
+
+.logo {
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+}
+
+.header ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: baseline;
+}
+
+.header li {
+  margin-left: 3rem;
+}
+
+.header a {
+  text-decoration: none;
+  font-size: 1.5rem;
+  color: #fcb8d2;
+}
+
+.header a:hover,
+.header a:active,
+.header a.active {
+  color: white;
+}

components/layout/MainNavigation.js

@@ -1,13 +1,12 @@
-import { Fragment } from 'react';
-
-import MainNavigation from './main-navigation';
+import MainNavigation from './MainNavigation';
+import classes from './Layout.module.css';
 
 function Layout(props) {
   return (
-    <Fragment>
+    <div>
       <MainNavigation />
-      <main>{props.children}</main>
-    </Fragment>
+      <main className={classes.main}>{props.children}</main>
+    </div>
   );
 }