style: flipping cards as background

components/custom/background/background.tsx

@@ -0,0 +1,9 @@
+import { Tiles } from './components/tiles';
+
+type BackgroundProps = {
+  children: React.ReactNode;
+};
+
+export function Background({ children }: BackgroundProps) {
+  return <Tiles>{children}</Tiles>;
+}

components/custom/background/components/card.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+import { Story } from './story';
+
+type CardProps = {
+  newsA?: z.infer<typeof NewsSchema>;
+  newsB?: z.infer<typeof NewsSchema>;
+};
+
+export function Card({ newsA, newsB }: 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 ? Story(newsA, true) : Story(newsB, false)}
+        </div>
+      </div>
+    </div>
+  );
+}

components/custom/background/components/story.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+
+export function Story(story: z.infer<typeof NewsSchema>, side: boolean) {
+  const backgroundColors = [
+    'bg-red-300',
+    'bg-blue-300',
+    'bg-green-300',
+    'bg-yellow-300',
+    'bg-indigo-300',
+    'bg-purple-300',
+    'bg-pink-300',
+    'bg-gray-300',
+    'bg-teal-300',
+    'bg-orange-300'
+  ];
+
+  const fadingColors = [
+    'to-red-300',
+    'to-blue-300',
+    'to-green-300',
+    'to-yellow-300',
+    'to-indigo-300',
+    'to-purple-300',
+    'to-pink-300',
+    'to-gray-300',
+    'to-teal-300',
+    'to-orange-300'
+  ];
+
+  const firstRandom = Math.floor(Math.random() * backgroundColors?.length);
+  const secondRandom = Math.floor(Math.random() * backgroundColors?.length);
+
+  const [firstColor, setFirstColor] = useState(firstRandom);
+  const [secondColor, setSecondColor] = useState(secondRandom);
+  const [switched, setSwitched] = useState(true);
+
+  if (switched !== side) {
+    setFirstColor(firstRandom);
+    setSecondColor(secondRandom);
+
+    setSwitched(side);
+  }
+
+  const colorIndex = side ? firstColor : secondColor;
+
+  return (
+    <div
+      className={`h-40 w-40 overflow-hidden p-6 shadow-sm ${backgroundColors[colorIndex]}`}
+    >
+      <h1 className='font-semibold'>{story.title}</h1>
+      <p className='italic'>{story.by}</p>
+      <div
+        className={`absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-b from-transparent ${fadingColors[colorIndex]}`}
+      ></div>
+    </div>
+  );
+}

components/custom/background/components/tiles.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+import { Card } from './card';
+
+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>[]>();
+
+  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='h-40 w-40'>
+        <Card newsA={news[randomA]} newsB={news[randomB]} />
+      </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 / (40 * 4));
+    const rows = Math.ceil(windowSize.height / (40 * 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 flex-col justify-between'>{renderGrid()}</div>;
+};

components/ui/button.tsx

@@ -8,7 +8,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90 bg-blue-500 hover:bg-blue-700',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: