finished?

src/app/exhibitsPage/page.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { IoIosArrowRoundBack } from 'react-icons/io';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import { ExhibitRow } from '../../types/types';
 import { fetchAllExhibits } from '../../supabase/exhibits/queries';
+import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
 
 /**
  * @param evt on click of button
@@ -21,7 +23,7 @@ function goBack(evt: React.SyntheticEvent) {
  */
 function BackButton() {
   return (
-    <button type="button" style={{ backgroundColor: '#4b711d' }} onClick={goBack}>
+    <button type="button" className="text-scary-forest" onClick={goBack}>
       {' '}
       <IoIosArrowRoundBack size={40} />
     </button>
@@ -42,14 +44,22 @@ function App() {
     getExhibits();
   }, [exhibits]);
   return (
-    <div className="bg-ivory h-screen">
+    <div className="bg-ivory">
       <NavBar/>
-      <div className="p-4">
+      <div className="p-4 m-auto">
         <BackButton/>
-        <div className="w-[95%] m-auto flex-col justify-start items-start gap-4">
-          <div className="text-night text-neutral-700 text-[32px] font-bold font-['Lato']">Our Exhibits </div>
-          <div className="text-night text-neutral-700 text-base font-light font-['Lato']">Saratoga is home to an abundance of plant and animal life. As you explore these exhibits you will learn about species that are endangered and being carefully monitored by scientists with protective efforts in place.</div>
+        <div className="flex-col justify-start items-start mb-6 mt-3">
+          <div className="text-night text-neutral-700 text-[32px] font-bold leading-9 font-['Lato'] mb-4">Our Exhibits </div>
+          <div className="text-night text-neutral-700 text-base leading-5 font-light font-['Lato']">Saratoga is home to an abundance of plant and animal life. As you explore these exhibits you will learn about species that are endangered and being carefully monitored by scientists with protective efforts in place.</div>
         </div>
+        <Link href="/siteMapPage">
+          <div className="px-4 py-2 rounded-md border border-asparagus justify-start items-start gap-2.5 inline-flex">
+            <div className="text-center text-asparagus text-base font-bold font-['Lato'] leading-tight">Go to Map</div>
+          </div>
+        </Link>
+        {exhibits.map(exhibit => (
+          <Exhibit title={exhibit.title} description={exhibit.description} category={exhibit.category} image={exhibit.image || ''} key={exhibit.id} id={exhibit.id}/>
+        ))}
       </div>
     </div>
   );

src/app/layout.tsx

@@ -14,6 +14,7 @@ export const metadata: Metadata = {
  *
  * @param root0
  * @param root0.children
+ * @returns head of page
  */
 export default function RootLayout({
   children,
@@ -29,6 +30,12 @@ export default function RootLayout({
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossOrigin=""
         />
+        <link
+          href="https://fonts.googleapis.com/css?family=Lato:200,300,400,700"
+          rel="stylesheet"
+          integrity="sha384-S/0sPWyivHb0nXEN1JbIZoAHSDK4PQv0Zdl6399sbd0mYRatVZsKWdfflTIgipPy"
+          crossOrigin=""
+        />
         <script
           src="https://unpkg.com/[email protected]/dist/leaflet.js"
           integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="

src/components/userComponents/Exhibit/Exhibit.tsx

@@ -1,59 +1,40 @@
 import React from 'react';
-import { IoIosArrowRoundBack } from 'react-icons/io';
+import Image from 'next/image';
 
 /**
  *
- * @param root0
- * @param root0.title
- * @param root0.createdAt
- * @param root0.contentLink
- * @param root0.id
+ * @param root0 passed in
+ * @param root0.title title of exhibit
+ * @param root0.description description of exhibit
+ * @param root0.category category of exhibit
+ * @param root0.image image
+ * @param root0.id id of exhibit
  * @returns exhibit component
  */
-
-/**
- * @param evt on click of button
- */
-function goBack(evt: React.SyntheticEvent) {
-    // ignore the native anchor action
-    evt.preventDefault();
-
-    window.history.back();
-  }
-
-  /**
-   * @returns back button
-   */
-  function BackButton() {
-    return (
-      <button type="button" style={{ backgroundColor: '#4b711d' }} onClick={goBack}>
-        {' '}
-        <IoIosArrowRoundBack size={40} />
-      </button>
-    );
-  }
-
-/**
- *
- * @param root0
- * @param root0.title
- * @param root0.createdAt
- * @param root0.contentLink
- * @param root0.id
- * @returns exhibit page
- */
 export default function Exhibit({
     title,
-    createdAt,
-    contentLink,
+    description,
+    category,
+    image,
     id,
   }: {
     title: string;
-    createdAt: string;
-    contentLink: string;
+    description: string;
+    category: string;
+    image: string;
     id: string;
   }) {
     return (
-      <li key={id} />
+      <ul key={id}>
+        <div className="w-[100%] px-4 pt-6 pb-7 bg-mint-cream rounded flex-col justify-start items-start gap-2.5 inline-flex mt-6">
+            <div className="flex-col justify-start items-start gap-5 flex">
+                <div className="justify-start items-center gap-2 inline-flex">
+                <div className="text-neutral-700 text-lg font-bold font-['Lato']"> {title}</div>
+                </div>
+                <div className="text-black text-base font-light font-['Lato']">{description}</div>
+                <Image src={image} alt="Exhibit" width={354} height={150}/>
+            </div>
+        </div>
+      </ul>
     );
   }