refactor: some name and styling changes

components/custom/background/tile/tile.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/schemas';
+import { TileContent } from './tileContent';
+
+type CardProps = {
+  newsA?: z.infer<typeof NewsSchema>;
+  newsB?: z.infer<typeof NewsSchema>;
+  width: number;
+  height: number;
+};
+
+export function Tile({ newsA, newsB, width, height }: CardProps) {
+  const [switched, setSwitched] = useState(false);
+  const [active, setActive] = useState(Math.random() < 0.5);
+  const [delayed, setDelayed] = useState(true);
+
+  useEffect(() => {
+    const randomDelay = Math.floor(Math.random() * 5000);
+
+    const interval = setInterval(
+      () => {
+        setSwitched(true);
+
+        window.setTimeout(function () {
+          setSwitched(false);
+          setActive(!active);
+          setDelayed(false);
+        }, 500 / 2);
+      },
+      delayed ? randomDelay : randomDelay + 3000
+    );
+
+    return () => clearInterval(interval);
+  }, [active, delayed]);
+
+  if (!newsA || !newsB) return <div></div>;
+
+  return (
+    <div className={`transform ${switched ? 'animate-rotate' : ''}`}>
+      <div className='transform-gpu'>
+        <div className={`absolute left-0 top-0 w-full ${''}`}>
+          {active
+            ? TileContent({ story: newsA, width, height, side: true })
+            : TileContent({ story: newsB, width, height, side: false })}
+        </div>
+      </div>
+    </div>
+  );
+}

components/custom/background/tile/tileContent.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/schemas';
+
+type CardContentProps = {
+  story: z.infer<typeof NewsSchema>;
+  side: boolean;
+  width: number;
+  height: number;
+};
+
+function getRandomColor() {
+  const letters = '456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 12)];
+  }
+  return color;
+}
+
+export function TileContent({ story, width, height, side }: CardContentProps) {
+  const [firstColor, setFirstColor] = useState(getRandomColor());
+  const [secondColor, setSecondColor] = useState(getRandomColor());
+  const [switched, setSwitched] = useState(true);
+
+  if (switched !== side) {
+    setFirstColor(getRandomColor());
+    setSecondColor(getRandomColor());
+
+    setSwitched(side);
+  }
+
+  const color = side ? firstColor : secondColor;
+
+  return (
+    <div
+      className={`overflow-hidden p-6 shadow-sm`}
+      style={{
+        backgroundColor: `${color}`,
+        height: `${height * 4}px`,
+        width: `${width * 4}px`
+      }}
+    >
+      <h1 className='overflow-auto font-semibold'>{story.title}</h1>
+      <p className='overflow-auto italic'>{story.by}</p>
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '33.33%',
+          background: `linear-gradient(to bottom, transparent, ${color})`
+        }}
+      ></div>
+    </div>
+  );
+}

components/custom/background/tile/tiles.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/schemas';
+import { Tile } from './tile';
+
+type TilesProps = {
+  children: React.ReactNode;
+};
+
+export const Tiles = ({ children }: TilesProps) => {
+  const pathname = usePathname();
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0
+  });
+  const [news, setNews] = useState<z.infer<typeof NewsSchema>[]>();
+
+  const baseWidth = 40;
+  const baseHeight = 40;
+
+  useEffect(() => {
+    async function getNews() {
+      const news = await fetch('/api/news').then(res => res.json());
+
+      if (news) {
+        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);
+    };
+  }, [setWindowSize, news]);
+
+  if (pathname === '/maintenance') return <div>{children}</div>;
+
+  function renderTile(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`}
+        style={{
+          height: `${baseHeight * 4}px`,
+          width: `${baseWidth * 4}px`
+        }}
+      >
+        <Tile
+          newsA={news[randomA]}
+          newsB={news[randomB]}
+          width={baseHeight}
+          height={baseHeight}
+        />
+      </div>
+    );
+  }
+
+  function renderRow(columns: number, key: number) {
+    return (
+      <div key={key} className='flex justify-between'>
+        {Array.from({ length: columns }).map((_, index) => renderTile(index))}
+      </div>
+    );
+  }
+
+  function renderGrid() {
+    const columns = Math.ceil(windowSize.width / (baseWidth * 4));
+    const rows = Math.ceil(windowSize.height / (baseHeight * 4));
+
+    return (
+      <div>
+        <div className='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>
+    );
+  }
+
+  return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
+};