news feed web (#61)

* news feed web * small change * added web screen, fixed styling when screen between certain sizes, fixed coloring using h-full (?), changed margins to padding, changed to rem * just used gradient for now for epic styling lol.. * changed bg to mint cream for now :( * changed web detection * removed text from web --------- Co-authored-by: sarahhpeng <[email protected]>
calblueprint · May 22, 2024 · 320e6c5 · 320e6c5
1 parent 6b1cef2
commit 320e6c5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 19 deletions.
diff --git a/src/app/newsFeedPage/page.tsx b/src/app/newsFeedPage/page.tsx
@@ -1,16 +1,20 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 import BackButton from '../../components/userComponents/BackButton/page';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import { NewsRow } from '../../types/types';
 import { fetchAllNewsByDate } from '../../supabase/news/queries';
 import NewsDisplay from '../../components/userComponents/NewsDisplay/NewsDisplay';
+import { useWebDeviceDetection } from '../../context/WindowWidthContext/WindowWidthContext';
 
 /**
- * @returns news feed page
+ * @description queries from the news table in supabase and fetches all the news rows to display
+ * @returns news feed page by querying from the news table in supabase
  */
 export default function App() {
+  const isWebDevice = useWebDeviceDetection();
   const [news, setNews] = useState<NewsRow[]>([]);
   useEffect(() => {
     // Get news
@@ -20,25 +24,62 @@ export default function App() {
     };
     getNews();
   }, [news]);
-
   return (
-    <div className="bg-ivory h-screen">
+    <div className="bg-ivory h-full">
       <NavBar />
-      <div className="p-4">
-        <BackButton />
-        <h1 className="text-night text-3xl font-bold mt-2 -ml-[1.8px]">News</h1>
-        <ul>
-          {news.map(article => (
-            <NewsDisplay
-              key={article.updated_at}
-              id={article.id}
-              contentLink={article.content_link}
-              createdAt={article.created_at}
-              title={article.title}
-            />
-          ))}
-        </ul>
-      </div>
+      {!isWebDevice && (
+        <div>
+          <div className="p-4">
+            <BackButton />
+            <h1 className="text-night text-3xl font-bold mt-2 -ml-[.113rem]">
+              News
+            </h1>
+            <ul>
+              {news.map(article => (
+                <NewsDisplay
+                  key={article.updated_at}
+                  id={article.id}
+                  contentLink={article.content_link}
+                  createdAt={article.created_at}
+                  title={article.title}
+                />
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+      {isWebDevice && (
+        <div>
+          <div className="flex">
+            <div className="w-[50%] text-night px-[10rem] pt-[7.5rem] bg-mint-cream flex flex-col items-center">
+              <div>
+                <p className="text-night">
+                  {' '}
+                  <Link href="/" className="text-scary-forest hover:underline">
+                    {' '}
+                    Home{' '}
+                  </Link>{' '}
+                  / News{' '}
+                </p>
+                <h1 className="text-night text-4xl font-bold pt-6">News</h1>
+              </div>
+            </div>
+            <div className="w-[50%]  px-[10rem] pt-[7.5rem] flex justify-center">
+              <ul className="pt-[4rem] m-auto">
+                {news.map(article => (
+                  <NewsDisplay
+                    key={article.updated_at}
+                    id={article.id}
+                    contentLink={article.content_link}
+                    createdAt={article.created_at}
+                    title={article.title}
+                  />
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/userComponents/NewsDisplay/NewsDisplay.tsx b/src/components/userComponents/NewsDisplay/NewsDisplay.tsx
@@ -25,7 +25,7 @@ export default function NewsDisplay({
   // format to readable date
   const date = moment(createdAt).format('MMMM Do, YYYY');
   return (
-    <li key={id}>
+    <li key={id} className="web:w-[22.125rem]">
       <a href={contentLink} target="_blank" rel="noreferrer noopener">
         <div className="flex flex-col items-start gap-3 mb-6 mt-6 font-[Lato]">
           <div className="flex m-auto flex-row justify-between w-full">