feat(website): implement chunking of tweets for better layout

Author: Rel1cx

website/lib/chunk.ts

@@ -0,0 +1,18 @@
+export function chunk<T>(arr: readonly T[], size: number): T[][] {
+  if (!Number.isInteger(size) || size <= 0) {
+    throw new Error("Size must be an integer greater than zero.");
+  }
+
+  const chunkLength = Math.ceil(arr.length / size);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const result: T[][] = Array(chunkLength);
+
+  for (let index = 0; index < chunkLength; index++) {
+    const start = index * size;
+    const end = start + size;
+
+    result[index] = arr.slice(start, end);
+  }
+
+  return result;
+}

website/pages/index.mdx

@@ -34,9 +34,10 @@ A series of composable ESLint plugins for libraries and frameworks that use Reac
 - [`eslint-config-sukka`](https://github.com/SukkaW/eslint-config-sukka) - Sukka's ESLint config preset.
 
 <TweetCards tweets={[
-  "1841248980354941038",
-  "1839913920984678890",
   "1865166494709026873",
+  "1839913920984678890",
+  "1841248980354941038",
+  "1859137094976696467",
 ]} />
 
 ## FAQ

website/widgets/tweet-cards.tsx

@@ -1,9 +1,21 @@
+import { useMemo } from "react";
 import { Tweet } from "react-tweet";
 
+import { chunk } from "#/lib/chunk";
+
 export function TweetCards({ tweets }: { tweets: string[] }) {
+  const chunkedTweets = useMemo(() => chunk(tweets, 2), [tweets]);
   return (
-    <div className="grid grid-cols-1 mt-4 sm:grid-cols-2 sm:gap-x-8 sm:mt-8 justify-center">
-      {tweets.map((id) => <Tweet key={id} id={id} />)}
+    <div className="grid grid-cols-1 md:grid-cols-2 sm:gap-x-8 sm:mt-8">
+      {chunkedTweets.map((chunk) => (
+        <div key={chunk.join("_")} className="grid justify-center">
+          {chunk.map((id) => (
+            <div key={id} className="h-fit max-w-full">
+              <Tweet id={id} />
+            </div>
+          ))}
+        </div>
+      ))}
     </div>
   );
 }