style: flipping cards as background

components/custom/background/components/card.tsx

@@ -1,14 +1,16 @@
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
 import { NewsSchema } from '../../../../utils/types';
-import { Story } from './story';
+import { CardContent } from './cardContent';
 
 type CardProps = {
   newsA?: z.infer<typeof NewsSchema>;
   newsB?: z.infer<typeof NewsSchema>;
+  width: number;
+  height: number;
 };
 
-export function Card({ newsA, newsB }: CardProps) {
+export function Card({ newsA, newsB, width, height }: CardProps) {
   const [switched, setSwitched] = useState(false);
   const [active, setActive] = useState(Math.random() < 0.5);
   const [delayed, setDelayed] = useState(true);
@@ -38,7 +40,9 @@ export function Card({ newsA, newsB }: CardProps) {
     <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)}
+          {active
+            ? CardContent({ story: newsA, width, height, side: true })
+            : CardContent({ story: newsB, width, height, side: false })}
         </div>
       </div>
     </div>

components/custom/background/components/cardContent.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+
+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 CardContent({ 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/components/story.tsx

@@ -1,59 +0,0 @@
-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

@@ -21,6 +21,9 @@ export const Tiles = ({ children }: TilesProps) => {
   });
   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());
@@ -63,8 +66,20 @@ export const Tiles = ({ children }: TilesProps) => {
     );
 
     return (
-      <div key={key} className='h-40 w-40'>
-        <Card newsA={news[randomA]} newsB={news[randomB]} />
+      <div
+        key={key}
+        className={`m-1`}
+        style={{
+          height: `${baseHeight * 4}px`,
+          width: `${baseWidth * 4}px`
+        }}
+      >
+        <Card
+          newsA={news[randomA]}
+          newsB={news[randomB]}
+          width={baseHeight}
+          height={baseHeight}
+        />
       </div>
     );
   }
@@ -78,8 +93,8 @@ export const Tiles = ({ children }: TilesProps) => {
   }
 
   function renderGrid() {
-    const columns = Math.ceil(windowSize.width / (40 * 4));
-    const rows = Math.ceil(windowSize.height / (40 * 4));
+    const columns = Math.ceil(windowSize.width / (baseWidth * 4));
+    const rows = Math.ceil(windowSize.height / (baseHeight * 4));
 
     return (
       <div>