maybe will make components equal heightsl ater if have time i cant fi…

…gure it out lol fml
calblueprint · Apr 28, 2024 · 7fcdd1a · 7fcdd1a
1 parent c285798
commit 7fcdd1a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 19 deletions.
diff --git a/src/app/exhibitsPage/page.tsx b/src/app/exhibitsPage/page.tsx
@@ -25,7 +25,7 @@ function App() {
   }, [exhibits]);
 
   // for web rendering
-  const [windowWidth, setWindowWidth] = useState(1024);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   useEffect(() => {
     const handleResize = () => setWindowWidth(window.innerWidth);
     window.addEventListener('resize', handleResize);
@@ -54,7 +54,7 @@ function App() {
   }, []);
   return (
     <div>
-      {windowWidth < 1024 && (
+      {windowWidth <= 1024 && (
         <div className="bg-ivory">
           <NavBar />
           <div className="p-4 m-auto">
@@ -88,13 +88,14 @@ function App() {
                   image={exhibit.image || ''}
                   key={exhibit.id}
                   id={exhibit.id}
+                  web={false}
                 />
               ))}
             </ul>
           </div>
         </div>
       )}
-      {windowWidth >= 1024 && (
+      {windowWidth > 1024 && (
         <div className="bg-ivory">
           <NavBar />
           <div className="pl-64 pr-64 pt-24 m-auto">
@@ -121,23 +122,24 @@ function App() {
               </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">
+              <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>
-            <ul>
+            <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
                 />
               ))}
-            </ul>
+            </div>
           </div>
         </div>
       )}

diff --git a/src/components/userComponents/Exhibit/Exhibit.tsx b/src/components/userComponents/Exhibit/Exhibit.tsx
@@ -8,35 +8,59 @@ import Image from 'next/image';
  * @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,
+  web,
 }: {
   title: string;
   description: string;
   image: string;
   id: number;
+  web: boolean;
 }) {
   return (
-    <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>
+      {!web && (
+        <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>
+      )}
+      {web && (
+        <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-hunterGreen 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>
-          <p className="text-night leading-tight font-normal font-['Lato']">
-            {description}
-          </p>
           <Image src={image} alt="Exhibit" width={354} height={150} />
+          <div className="flex-grow" />
         </div>
-      </div>
-    </li>
+      )}
+    </div>
   );
 }