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>
+  );
+}