change window.zoomLevel to 0

.gitignore

@@ -31,4 +31,4 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
+.vercel

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "window.zoomLevel": 6
-}
+  "window.zoomLevel": 0
+}

components/layout/Layout.module.css

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

components/layout/MainNavigation.js

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

components/layout/MainNavigation.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/layout.js

@@ -1,8 +1,8 @@
 import { Fragment } from 'react';
 
-import MainNavigation from './main-navigation';
+import MainNavigation from './MainNavigation';
 
-function Layout(props) {
+function LayoutWrapper(props) {
   return (
     <Fragment>
       <MainNavigation />
@@ -11,4 +11,4 @@ function Layout(props) {
   );
 }
 
-export default Layout;
+export default LayoutWrapper;

components/meetups/MeetupDetails.js

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react';
+import classes from './MeetupDetails.module.css';
+const MeetupDetails = (props) => {
+  return (
+    <Fragment>
+      <h2>Details</h2>
+      <section className={classes.detail}>
+        <img src={props.image} alt={props.title} />
+        <div>
+          <h3>{props.title}</h3>
+          <address>{props.address}</address>
+        </div>
+      </section>
+    </Fragment>
+  );
+};
+
+export default MeetupDetails;

components/meetups/MeetupDetails.module.css

@@ -0,0 +1,7 @@
+.detail {
+  text-align: center;
+}
+
+.detail img {
+  width: 100%;
+}

components/meetups/MeetupItem.js

@@ -0,0 +1,27 @@
+import Card from '../ui/Card';
+import classes from './MeetupItem.module.css';
+import { useRouter } from 'next/router';
+function MeetupItem(props) {
+  const router = useRouter();
+  const showDetailsHandler = () => {
+    router.push(`/${props.id}`);
+  };
+  return (
+    <li className={classes.item}>
+      <Card>
+        <div className={classes.image}>
+          <img src={props.image} alt={props.title} />
+        </div>
+        <div className={classes.content}>
+          <h3>{props.title}</h3>
+          <address>{props.address}</address>
+        </div>
+        <div className={classes.actions}>
+          <button onClick={showDetailsHandler}>Show Details</button>
+        </div>
+      </Card>
+    </li>
+  );
+}
+
+export default MeetupItem;

components/meetups/MeetupItem.module.css

@@ -0,0 +1,46 @@
+.item {
+  margin: 1rem 0;
+}
+
+.image {
+  width: 100%;
+  height: 20rem;
+  overflow: hidden;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+
+.image img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.content {
+  text-align: center;
+  padding: 1rem;
+}
+
+.content h3 {
+  font-size: 1.25rem;
+  color: #2c292b;
+}
+
+.actions {
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.actions button {
+  font: inherit;
+  cursor: pointer;
+  color: #77002e;
+  border: 1px solid #77002e;
+  background-color: transparent;
+  padding: 0.5rem 1.5rem;
+  border-radius: 4px;
+}
+
+.actions button:hover,
+.actions button:active {
+  background-color: #ffe2ed;
+}

components/meetups/MeetupList.js

@@ -0,0 +1,20 @@
+import MeetupItem from './MeetupItem';
+import classes from './MeetupList.module.css';
+
+function MeetupList(props) {
+  return (
+    <ul className={classes.list}>
+      {props.meetups.map((meetup) => (
+        <MeetupItem
+          key={meetup.id}
+          id={meetup.id}
+          image={meetup.image}
+          title={meetup.title}
+          address={meetup.address}
+        />
+      ))}
+    </ul>
+  );
+}
+
+export default MeetupList;

components/meetups/MeetupList.module.css

@@ -0,0 +1,5 @@
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

components/meetups/NewMeetupForm.js

@@ -0,0 +1,62 @@
+import { useRef } from 'react';
+
+import Card from '../ui/Card';
+import classes from './NewMeetupForm.module.css';
+
+function NewMeetupForm(props) {
+  const titleInputRef = useRef();
+  const imageInputRef = useRef();
+  const addressInputRef = useRef();
+  const descriptionInputRef = useRef();
+
+  function submitHandler(event) {
+    event.preventDefault();
+
+    const enteredTitle = titleInputRef.current.value;
+    const enteredImage = imageInputRef.current.value;
+    const enteredAddress = addressInputRef.current.value;
+    const enteredDescription = descriptionInputRef.current.value;
+
+    const meetupData = {
+      title: enteredTitle,
+      image: enteredImage,
+      address: enteredAddress,
+      description: enteredDescription,
+    };
+
+    props.onAddMeetup(meetupData);
+  }
+
+  return (
+    <Card>
+      <form className={classes.form} onSubmit={submitHandler}>
+        <div className={classes.control}>
+          <label htmlFor='title'>Meetup Title</label>
+          <input type='text' required id='title' ref={titleInputRef} />
+        </div>
+        <div className={classes.control}>
+          <label htmlFor='image'>Meetup Image</label>
+          <input type='url' required id='image' ref={imageInputRef} />
+        </div>
+        <div className={classes.control}>
+          <label htmlFor='address'>Address</label>
+          <input type='text' required id='address' ref={addressInputRef} />
+        </div>
+        <div className={classes.control}>
+          <label htmlFor='description'>Description</label>
+          <textarea
+            id='description'
+            required
+            rows='5'
+            ref={descriptionInputRef}
+          ></textarea>
+        </div>
+        <div className={classes.actions}>
+          <button>Add Meetup</button>
+        </div>
+      </form>
+    </Card>
+  );
+}
+
+export default NewMeetupForm;

components/meetups/NewMeetupForm.module.css

@@ -0,0 +1,45 @@
+.form {
+  padding: 1rem;
+}
+
+.control {
+  margin-bottom: 0.5rem;
+}
+
+.control label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.control input,
+.control textarea {
+  display: block;
+  font: inherit;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  padding: 0.25rem;
+  width: 100%;
+}
+
+.actions {
+  margin-top: 1rem;
+  text-align: right;
+}
+
+.actions button {
+  font: inherit;
+  cursor: pointer;
+  background-color: #77002e;
+  color: white;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #77002e;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.actions button:hover,
+.actions button:active {
+  background-color: #a50e48;
+  border-color: #a50e48;
+}