My demo app

.vscode/settings.json

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

components/layout/Layout.js

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

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,24 @@
+import Link from 'next/link';
+
+import classes from './MainNavigation.module.css';
+
+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/meetups/MeetupDetail.js

@@ -0,0 +1,17 @@
+import classes from './MeetupDetail.module.css';
+
+function MeetupDetail(props) {
+  return (
+    <section className={classes.detail}>
+      <img
+        src={props.image}
+        alt={props.title}
+      />
+      <h1>{props.title}</h1>
+      <address>{props.address}</address>
+      <p>{props.description}</p>
+    </section>
+  );
+}
+
+export default MeetupDetail;

components/meetups/MeetupDetail.module.css

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

components/meetups/MeetupItem.js

@@ -0,0 +1,31 @@
+import { useRouter } from 'next/router';
+
+import Card from '../ui/Card';
+import classes from './MeetupItem.module.css';
+
+function MeetupItem(props) {
+  const router = useRouter();
+
+  function 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;
+}

components/ui/Card.js

@@ -0,0 +1,7 @@
+import classes from './Card.module.css';
+
+function Card(props) {
+  return <div className={classes.card}>{props.children}</div>;
+}
+
+export default Card;

components/ui/Card.module.css

@@ -0,0 +1,5 @@
+.card {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}