added puzzle component

src/app/(game)/puzzle/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Menu } from "@/components/Menu";
 import { useState } from "react";
-
+import Puzzle from "@/components/Puzzle";
 export default function Page() {
   const [active, setActive] = useState(0);
   return (
@@ -11,6 +11,8 @@ export default function Page() {
         active={active}
         setActive={setActive}
       />
+      <Puzzle src="/meme/meme-1.jpg" done={[2, 4, 5, 7]} size="3x3" />
+      <Puzzle src="/meme/meme-2.jpg" done={[3, 12, 9, 7]} size="4x4" />
     </div>
   );
 }

src/components/Puzzle.tsx

@@ -0,0 +1,40 @@
+import { twMerge } from "tailwind-merge";
+export default function Puzzle({
+  src,
+  done,
+  size,
+}: {
+  src: string;
+  done: number[];
+  size: "3x3" | "4x4";
+}) {
+  return (
+    <div className="w-full p-2">
+      <div
+        className={twMerge(
+          "grid aspect-square overflow-hidden rounded-md border-4 border-gray-200",
+          size === "3x3" ? "grid-cols-3" : "grid-cols-4",
+        )}
+        style={{
+          backgroundImage: `url(${src})`,
+          backgroundSize: "cover",
+        }}
+      >
+        {Array.from({ length: size === "3x3" ? 9 : 16 }).map((_, i) => {
+          const isDone = done.includes(i + 1);
+          return (
+            <div
+              key={i}
+              className={twMerge(
+                "flex select-none items-center justify-center bg-white font-mono text-6xl font-bold text-gray-300",
+                isDone ? "opacity-0" : "",
+              )}
+            >
+              ?
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}