From 8abe868a0d443eed3c10b59c9a0b05c884e5577f Mon Sep 17 00:00:00 2001
From: polaris <polaris@mail.com>
Date: Sun, 30 Jun 2024 00:17:28 -0400
Subject: [PATCH] added bento grid to share page to mimic real score screen

---
 app/(sharing)/[token]/[id]/page.tsx | 74 +++++++++++++++++++----------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/app/(sharing)/[token]/[id]/page.tsx b/app/(sharing)/[token]/[id]/page.tsx
index 50f132c..cb330cc 100644
--- a/app/(sharing)/[token]/[id]/page.tsx
+++ b/app/(sharing)/[token]/[id]/page.tsx
@@ -32,35 +32,57 @@ export default async function Share({
   // Filter songsData to match the playlogIds
   const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
   return (
-    <div className="flex justify-center items-center h-screen">
-      {matchedSongs.map((song) => (
-        <div
-          key={song.id}
-          className="bg-slate-500  h-200 w-400 flex justify-center items-center"
-        >
-          <div className="text-white text-lg">
-            <p>{song.title}</p>
-            <p>Artist: {song.artist}</p>
-            <p>Genre: {song.genre}</p>
-            <p>diff: {song.chartlevel}</p>
+    <div className=" h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
+      <div className="col-span-2 row-span-2  row-start-2 col-start-2 bg-pink-200 rounded-lg shadow-md flex items-center justify-center">
+        <p>Salmon</p>
+      </div>
 
-            <p>Level: {song.level}</p>
+      <div className="col-span-4 row-span-4  row-start-2  bg-lime-200 rounded-lg shadow-md flex items-center justify-center">
+        <p>Broccoli</p>
+      </div>
 
-            <p>Full Combo: {song.isFullCombo ? "Yes" : "No"}</p>
-            <p>Score: {song.score}</p>
+      <div className="col-span-2 col-start-2 row-span-2 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
+        <p>Tamago</p>
+      </div>
 
-            <div>
-              <span
-                className={`justify-center rounded-sm text-center text-sm font-bold ${getDifficultyClass(
-                  song.chartId
-                )} text-white`}
-              >
-                {getDifficultyText(song.chartId)}
-              </span>
-            </div>
-          </div>
-        </div>
-      ))}
+      <div className="col-span-2 col-start-2  row-span-3 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
+        <p>Pork</p>
+      </div>
+
+      <div className="col-span-4 col-start-4 row-span-2 bg-green-200 rounded-lg shadow-md flex items-center justify-center">
+        <p>Edamame</p>
+      </div>
     </div>
+    // <div className="py-4 px-2 mx-auto max-w-screen-xl sm:py-4 lg:px-6">
+    //   <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4 h-full">
+    //     {matchedSongs.map((song) => (
+    //       <div
+    //         key={song.id}
+    //         className="bg-slate-500  h-200 w-400 flex justify-center items-center"
+    //       >
+    //         <div className="text-white text-lg">
+    //           <p>{song.title}</p>
+    //           <p>Artist: {song.artist}</p>
+    //           <p>Genre: {song.genre}</p>
+    //           <p>diff: {song.chartlevel}</p>
+
+    //           <p>Level: {song.level}</p>
+
+    //           <p>Full Combo: {song.isFullCombo ? "Yes" : "No"}</p>
+    //           <p>Score: {song.score}</p>
+
+    //           <div>
+    //             <span
+    //               className={`justify-center rounded-sm text-center text-sm font-bold ${getDifficultyClass(
+    //                 song.chartId
+    //               )} text-white`}
+    //             >
+    //               {getDifficultyText(song.chartId)}
+    //             </span>
+    //           </div>
+    //         </div>
+    //       </div>
+    //     ))}
+    //   </div>
   );
 }