Update React Project

Author: ThomasCode92

frontend/src/App.js

@@ -12,6 +12,7 @@ import EventDetailPage, {
 } from './pages/EventDetail';
 import EditEventPage from './pages/EditEvent';
 import NewEventPage from './pages/NewEvent';
+import NewsletterPage, { action as newsletterAction } from './pages/Newsletter';
 import { action as manipulateEventAction } from './components/EventForm';
 
 const router = createBrowserRouter([
@@ -54,6 +55,11 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: 'newsletter',
+        element: <NewsletterPage />,
+        action: newsletterAction,
+      },
     ],
   },
 ]);

frontend/src/components/MainNavigation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import NewsletterSignup from './NewsletterSignup';
 import classes from './MainNavigation.module.css';
 
 function MainNavigation() {
@@ -29,8 +30,19 @@ function MainNavigation() {
               Events
             </NavLink>
           </li>
+          <li>
+            <NavLink
+              to="/newsletter"
+              className={({ isActive }) =>
+                isActive ? classes.active : undefined
+              }
+            >
+              Newsletter
+            </NavLink>
+          </li>
         </ul>
       </nav>
+      <NewsletterSignup />
     </header>
   );
 }

frontend/src/components/NewsletterSignup.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classes from './NewsletterSignup.module.css';
+
+function NewsletterSignup() {
+  return (
+    <form method="post" className={classes.newsletter}>
+      <input
+        type="email"
+        placeholder="Sign up for newsletter..."
+        aria-label="Sign up for newsletter"
+      />
+      <button>Sign up</button>
+    </form>
+  );
+}
+
+export default NewsletterSignup;

frontend/src/components/NewsletterSignup.module.css

@@ -0,0 +1,18 @@
+.newsletter input,
+.newsletter button {
+  font: inherit;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0;
+  border: none;
+}
+
+.newsletter button {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  cursor: pointer;
+}
+
+.newsletter button:hover {
+  background-color: var(--color-primary-300);
+  color: var(--color-gray-800);
+}

frontend/src/pages/Newsletter.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import NewsletterSignup from '../components/NewsletterSignup';
+import PageContent from '../components/PageContent';
+
+function NewsletterPage() {
+  return (
+    <PageContent title="Join our awesome newsletter!">
+      <NewsletterSignup />
+    </PageContent>
+  );
+}
+
+export default NewsletterPage;
+
+export async function action({ request }) {
+  const data = await request.formData();
+  const email = data.get('email');
+
+  // send to backend newsletter server ...
+  console.log(email);
+  return { message: 'Signup successful!' };
+}