Justin exhibit redo

.github/workflows/lint.yml

@@ -0,0 +1,65 @@
+---
+name: Lint
+
+#############################
+# Start the job on push #
+#############################
+on:
+  push:
+    branches-ignore: [main]
+  pull_request:
+    branches: [main]
+
+###############
+# Set the Job #
+###############
+jobs:
+  build:
+    # Name the Job
+    name: Run ESLint, Prettier, and TypeScript compiler
+    # Set the agent to run on
+    runs-on: ubuntu-latest
+
+    ##################
+    # Load all steps #
+    ##################
+    steps:
+      ##########################
+      # Checkout the code base #
+      ##########################
+      - name: Checkout Code
+        uses: actions/checkout@v3
+        with:
+          # Full git history is needed to get a proper
+          # list of changed files within `super-linter`
+          fetch-depth: 0
+
+      ################################
+      # Install packages #
+      ################################
+      - name: Install packages
+        run: npm ci
+      ################################
+      # Lint codebase #
+      ################################
+      - name: Run ESLint
+        run: npx lint-staged
+      ################################
+      # Check Prettier on codebase #
+      ################################
+      - name: Run Prettier
+        run: npx prettier --check .
+      ################################
+      # Check for TypeScript errors #
+      # TODO: Add this back once outstanding issues are resolved by all devs.
+      ################################
+    #   - name: Run TypeScript compiler (tsc) on staged files
+    #     run: |
+    #       # Get list of staged TypeScript files
+    #       files=$(git diff --cached --name-only --diff-filter=d | grep '\.tsx\?$')
+
+    #       # Run tsc on each file
+    #       for file in $files
+    #       do
+    #           npx tsc --noEmit $file || exit 1
+    #       done

src/app/exhibitsPage/page.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import NavBar from '../../components/userComponents/navBar/navBar';
+import { CategoryRow } from '../../types/types';
+import { fetchAllCategories } from '../../supabase/category/queries';
+import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
+import BackButton from '../../components/userComponents/BackButton/page';
+import { useWebDeviceDetection } from '../../context/WindowWidthContext/WindowWidthContext';
+
+/**
+ * @returns exhibit page
+ */
+function App() {
+  const isWebDevice = useWebDeviceDetection();
+  const [exhibits, setExhibits] = useState<CategoryRow[]>([]);
+  // fetches all the exhibits to display on the page
+  useEffect(() => {
+    // Get exhibits
+    const getExhibits = async () => {
+      const fetchedExhibits: CategoryRow[] = await fetchAllCategories();
+      setExhibits(fetchedExhibits);
+    };
+    getExhibits();
+    // Detect the hash in URL and scroll to the element with the corresponding ID
+  }, [exhibits]);
+
+  // activates whenever the page opens.
+  // checks if there's a "hash" which is an id of one of the exhibits to scroll to.
+  // scrolls down to corresponding exhibit with slight offset
+  useEffect(() => {
+    const { hash } = window.location;
+    if (hash) {
+      setTimeout(() => {
+        const element = document.querySelector(hash);
+        const yOffset = -200;
+        if (element) {
+          const y =
+            element.getBoundingClientRect().top + window.scrollY + yOffset;
+          // check on this offset later
+          window.scrollTo({ top: y, behavior: 'instant' });
+        }
+      }, 1000);
+    }
+  }, []);
+  return (
+    <div>
+      {!isWebDevice && (
+        <div className="bg-ivory">
+          <NavBar />
+          <div className="p-4 m-auto">
+            <BackButton />
+            <div className="flex-col justify-start items-start mt-2">
+              <h1 className="text-night leading-9 font-['Lato'] mb-4">
+                Our Exhibits{' '}
+              </h1>
+              <p className="text-night leading-5 font-normal font-['Lato']">
+                The Bay Area is home to a wide variety of plant and animal life.
+                As you explore the exhibits, you will learn about threatened and
+                endangered species that are under careful monitoring by
+                biologists. Protective conservation efforts are in place for
+                these vulnerable plants and animals. We welcome you to learn
+                more about these important species throughout the exhibits. Scan
+                the QR codes on display for more information.
+              </p>
+            </div>
+            <Link href="/siteMapPage">
+              <div className="px-4 py-2 mb-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
+                <p className="active:text-hunterGreen text-center text-asparagus font-bold font-['Lato'] leading-tight">
+                  Go to Map
+                </p>
+              </div>
+            </Link>
+            <ul>
+              {exhibits.map(exhibit => (
+                <Exhibit
+                  title={exhibit.category || ''}
+                  description={exhibit.description || ''}
+                  image={exhibit.image || ''}
+                  key={exhibit.id}
+                  id={exhibit.id}
+                  web={false}
+                />
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+      {isWebDevice && (
+        <div className="bg-ivory">
+          <NavBar />
+          <div className="pl-64 pr-64 pt-24 m-auto">
+            <p className="text-night font-['Lato']">
+              {' '}
+              <Link className="text-scary-forest hover:underline" href="/">
+                {' '}
+                Home{' '}
+              </Link>{' '}
+              / Our Exhibits{' '}
+            </p>
+            <div className="flex-col justify-start items-start mt-6">
+              <h1 className="text-night leading-9 font-['Lato'] mb-4">
+                Our Exhibits{' '}
+              </h1>
+              <p className="text-night leading-5 font-normal font-['Lato']">
+                The Bay Area is home to a wide variety of plant and animal life.
+                As you explore the exhibits, you will learn about threatened and
+                endangered species that are under careful monitoring by
+                biologists. Protective conservation efforts are in place for
+                these vulnerable plants and animals. We welcome you to learn
+                more about these important species throughout the exhibits. Scan
+                the QR codes on display for more information.
+              </p>
+            </div>
+            <Link href="/siteMapPage">
+              <div className="px-4 py-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
+                <p className="active:text-hunterGreen text-center text-asparagus font-bold font-['Lato'] leading-tight">
+                  Go to Map
+                </p>
+              </div>
+            </Link>
+            <div className="mt-8 grid grid-cols-2 gap-16 pb-[6rem]">
+              {exhibits.map(exhibit => (
+                <Exhibit
+                  title={exhibit.category || ''}
+                  description={exhibit.description || ''}
+                  image={exhibit.image || ''}
+                  key={exhibit.id}
+                  id={exhibit.id}
+                  web
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;

src/app/layout.tsx

@@ -12,7 +12,6 @@ export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 };
-
 /**
  * @param root0 - Destructured object containing the properties.
  * @param root0.children - The child elements to be rendered within the RootLayout component.

src/components/userComponents/Exhibit/Exhibit.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import Image from 'next/image';
+import { useWebDeviceDetection } from '../../../context/WindowWidthContext/WindowWidthContext';
+
+/**
+ *
+ * @param root0 passed in
+ * @param root0.title title of exhibit
+ * @param root0.description description of exhibit
+ * @param root0.image image
+ * @param root0.id id of exhibit
+ * @param root0.web
+ * @returns exhibit component
+ */
+export default function Exhibit({
+  title,
+  description,
+  image,
+  id,
+}: {
+  title: string;
+  description: string;
+  image: string;
+  id: number;
+}) {
+  const isWebDevice = useWebDeviceDetection();
+  return (
+    <div>
+      {!isWebDevice && (
+        <li key={id} id={`a${id}`}>
+          <div className="w-full px-4 py-8 bg-mint-cream rounded-lg 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">
+                <h2 className="text-night font-semibold leading-tight font-['Lato']">
+                  {title}
+                </h2>
+              </div>
+              <p className="text-night leading-tight font-normal font-['Lato']">
+                {description}
+              </p>
+              <Image src={image} alt="Exhibit" width={354} height={150} />
+            </div>
+          </div>
+        </li>
+      )}
+      {isWebDevice && (
+        <div className="flex flex-col w-full px-8 py-16 bg-mint-cream rounded-lg flex-col justify-start items-start gap-2.5 mt-6">
+          <div className="justify-start items-start gap-5">
+            <div className="justify-start items-center gap-2">
+              <h1 className="text-hunter-green font-semibold leading-tight font-['Lato']">
+                {' '}
+                {title}
+              </h1>
+            </div>
+            <p className="text-night leading-tight font-normal mt-5 mb-5 font-['Lato']">
+              {description}
+            </p>
+          </div>
+          <Image src={image} alt="Exhibit" width={354} height={150} />
+          <div className="flex-grow" />
+        </div>
+      )}
+    </div>
+  );
+}