Add embedded newletter

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,19 +1,22 @@
-import React, { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Layout from './components/Layout';
 
 import './App.css';
 
-const index = React.lazy(() => import('./pages/index'));
+const classcouncil = lazy(() => import('./pages/classcouncil'));
-const initiatives = React.lazy(() => import('./pages/initiatives'));
+const committee = lazy(() => import('./pages/committee'));
-const involved = React.lazy(() => import('./pages/involved'));
+const feedback = lazy(() => import('./pages/feedback'));
-const mission = React.lazy(() => import('./pages/mission'));
+const index = lazy(() => import('./pages/index'));
-const news = React.lazy(() => import('./pages/news'));
+const initiatives = lazy(() => import('./pages/initiatives'));
-const newsarticle = React.lazy(() => import('./pages/newsarticle'));
+const involved = lazy(() => import('./pages/involved'));
-const notfound = React.lazy(() => import('./pages/404'));
+const mission = lazy(() => import('./pages/mission'));
-const officers = React.lazy(() => import('./pages/officers'));
+const news = lazy(() => import('./pages/news'));
-const committee = React.lazy(() => import('./pages/committee'));
+const newsarticle = lazy(() => import('./pages/newsarticle'));
-const classcouncil = React.lazy(() => import('./pages/classcouncil'));
+const newsletter = lazy(() => import('./pages/newsletter'));
+const notfound = lazy(() => import('./pages/404'));
+const officers = lazy(() => import('./pages/officers'));
+
 const loading = (
 	<div
 		style={{
@@ -27,7 +30,6 @@ const loading = (
 		<h3 style={{ textAlign: 'center', width: '100vw' }}>Loading...</h3>
 	</div>
 );
-const feedback = React.lazy(() => import('./pages/feedback'));
 
 export default function App() {
 	return (
@@ -38,6 +40,7 @@ export default function App() {
 						<Route path='/initiatives' exact component={initiatives} />
 						<Route path='/involved' exact component={involved} />
 						<Route path='/news/:articleId' component={newsarticle} />
+						<Route path='/newsletter' exact component={newsletter} />
 						<Route path='/news' exact component={news} />
 						<Route path='/mission' exact component={mission} />
 						<Route path='/officers' exact component={officers} />

src/components/Navbar.tsx

@@ -25,8 +25,8 @@ let pages = [
 				title: 'News',
 			},
 			{
-				url: '#',
+				url: '/newsletter',
-				title: 'Newsletter (In development!)',
+				title: 'Newsletter',
 			},
 		],
 	},

src/pages/newsletter.tsx

@@ -0,0 +1,23 @@
+import Centered from '../components/Centered';
+import Hero from '../components/Hero';
+import PrimaryHeader from '../components/PrimaryHeader';
+import { SGA_NEWSLETTER_EMBED_URL } from '../lib/constants';
+
+export default function Newsletter() {
+	return (
+		<>
+			<Hero heading='Newsletter' />
+			<main>
+				<Centered>
+					<PrimaryHeader>SGA Newsletter</PrimaryHeader>
+					<iframe
+						title='SGA Newsletter'
+						src={SGA_NEWSLETTER_EMBED_URL}
+						width='800'
+						height='600'
+					/>
+				</Centered>
+			</main>
+		</>
+	);
+}