refactor: improve news and email handling, style, folder structure (#16)

components/tiles/Tiles.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { NewsTileType } from '@utils/validationSchemas';
+import { usePathname } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import Tile from './components/Tile';
+
+interface TilesProps {
+  children: React.ReactNode;
+}
+
+export default function Tiles({ children }: TilesProps) {
+  const pathname = usePathname();
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0
+  });
+  const [news, setNews] = useState<NewsTileType[]>();
+
+  useEffect(() => {
+    async function getNews() {
+      const news: NewsTileType[] = await fetch('/api/news').then(res =>
+        res.json()
+      );
+
+      setNews(news);
+    }
+
+    if (!news) {
+      getNews();
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [news]);
+
+  const renderTile = useCallback(
+    (key: number) => {
+      if (!news) return <div key={key}></div>;
+
+      const randomA = Math.floor(Math.random() * news?.length);
+      const randomB = Math.floor(
+        Math.random() * news?.filter((_, index) => index !== randomA)?.length
+      );
+
+      return (
+        <div key={key} className={`m-1 h-40 w-40`}>
+          <Tile newsA={news[randomA]} newsB={news[randomB]} />
+        </div>
+      );
+    },
+    [news]
+  );
+
+  const renderRow = useCallback(
+    (columns: number, key: number) => {
+      return (
+        <div key={key} className='flex justify-between'>
+          {Array.from({ length: columns }).map((_, index) => renderTile(index))}
+        </div>
+      );
+    },
+    [renderTile]
+  );
+
+  const renderGrid = useCallback(() => {
+    const columns = Math.ceil(windowSize.width / (40 * 4));
+    const rows = Math.ceil(windowSize.height / (40 * 4));
+
+    return (
+      <div>
+        <div className='-ml-12 -mt-10 flex flex-col justify-between'>
+          {Array.from({ length: rows }).map((_, index) =>
+            renderRow(columns, index)
+          )}
+        </div>
+        <div className='absolute inset-0 flex items-center justify-center'>
+          {children}
+        </div>
+      </div>
+    );
+  }, [children, renderRow, windowSize]);
+
+  if (pathname === '/maintenance') return <div>{children}</div>;
+
+  return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
+}