refactor: removed unnecessary tile size variable

components/custom/background/tile/tile.tsx

@@ -6,11 +6,9 @@ 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) {
+export function Tile({ newsA, newsB }: CardProps) {
   const [switched, setSwitched] = useState(false);
   const [active, setActive] = useState(Math.random() < 0.5);
   const [delayed, setDelayed] = useState(true);
@@ -41,8 +39,8 @@ export function Tile({ newsA, newsB, width, height }: CardProps) {
       <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 })}
+            ? TileContent({ story: newsA, side: true })
+            : TileContent({ story: newsB, side: false })}
         </div>
       </div>
     </div>

components/custom/background/tile/tileContent.tsx

@@ -5,8 +5,6 @@ import { NewsSchema } from '../../../../utils/schemas';
 type CardContentProps = {
   story: z.infer<typeof NewsSchema>;
   side: boolean;
-  width: number;
-  height: number;
 };
 
 function getRandomColor() {
@@ -18,7 +16,7 @@ function getRandomColor() {
   return color;
 }
 
-export function TileContent({ story, width, height, side }: CardContentProps) {
+export function TileContent({ story, side }: CardContentProps) {
   const [firstColor, setFirstColor] = useState(getRandomColor());
   const [secondColor, setSecondColor] = useState(getRandomColor());
   const [switched, setSwitched] = useState(true);
@@ -34,11 +32,9 @@ export function TileContent({ story, width, height, side }: CardContentProps) {
 
   return (
     <div
-      className={`overflow-hidden p-6 shadow-sm`}
+      className={`h-40 w-40 overflow-hidden p-6 shadow-sm`}
       style={{
-        backgroundColor: `${color}`,
-        height: `${height * 4}px`,
-        width: `${width * 4}px`
+        backgroundColor: `${color}`
       }}
     >
       <h1 className='overflow-auto font-semibold'>{story.title}</h1>

components/custom/background/tile/tiles.tsx

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