add meetup layout

Author: solygambas

components/layout/MainNavigation.js

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

components/meetups/MeetupDetail.js

@@ -0,0 +1,14 @@
+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

@@ -1,7 +1,13 @@
-import Card from '../ui/Card';
-import classes from './MeetupItem.module.css';
+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>
@@ -13,7 +19,8 @@ function MeetupItem(props) {
           <address>{props.address}</address>
         </div>
         <div className={classes.actions}>
-          <button>Show Details</button>
+          <button onClick={showDetailsHandler}>Show Details</button>
+          {/* Link would be better */}
         </div>
       </Card>
     </li>

pages/[meetupId]/index.js

@@ -0,0 +1,14 @@
+import MeetupDetail from "../../components/meetups/MeetupDetail";
+
+function MeetupDetailsPage() {
+  return (
+    <MeetupDetail
+      title="A First Meetup"
+      address="85 S. Edgemont Street, Crawfordsville, IN 47933"
+      description="This is a first meetup!"
+      image="https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80"
+    />
+  );
+}
+
+export default MeetupDetailsPage;

pages/_app.js

@@ -1,7 +1,13 @@
-import '../styles/globals.css'
+import Layout from "../components/layout/Layout";
+
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
-export default MyApp
+export default MyApp;

pages/index.js

@@ -0,0 +1,26 @@
+import MeetupList from "../components/meetups/MeetupList";
+
+const DUMMY_MEETUPS = [
+  {
+    id: "m1",
+    title: "A First Meetup",
+    image:
+      "https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80",
+    address: "85 S. Edgemont Street, Crawfordsville, IN 47933",
+    description: "This is a first meetup!",
+  },
+  {
+    id: "m2",
+    title: "A Second Meetup",
+    image:
+      "https://images.unsplash.com/photo-1611095973015-2c65f77541e1?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80",
+    address: "7718 Ann Court, Greensburg, PA 15601",
+    description: "This is a second meetup!",
+  },
+];
+
+function HomePage() {
+  return <MeetupList meetups={DUMMY_MEETUPS} />;
+}
+
+export default HomePage;

pages/new-meetup/index.js

@@ -0,0 +1,10 @@
+import NewMeetupForm from "../../components/meetups/NewMeetupForm";
+
+function NewMeetupPage() {
+  function addMeetupHandler(enteredMeetupData) {
+    console.log(enteredMeetupData);
+  }
+  return <NewMeetupForm onAddMeetup={addMeetupHandler} />;
+}
+
+export default NewMeetupPage;

styles/globals.css

@@ -6,6 +6,7 @@
 
 body {
   font-family: 'Open Sans', 'Lato', sans-serif;
+  margin: 0;
 }
 
 h1,