added data to sharing page

app/(sharing)/[token]/[id]/page.tsx

@@ -1,6 +1,7 @@
 import { getAuth } from "@/auth/queries/getauth";
 import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
 import { shareScore } from "../token";
+import { getDifficultyClass, getDifficultyText } from "@/lib/helpers";
 
 export default async function Share({
   params,
@@ -13,19 +14,14 @@ export default async function Share({
   const tokenResult = await shareScore(token);
 
   if (tokenResult.error) {
-
     return <p>{tokenResult.error}</p>;
   }
 
+  const { user } = await getAuth();
 
- const { user } = await getAuth();
-
- 
- if (!user?.UserId) {
-  return {
-    error:"no user id"
+  if (!user?.UserId) {
+    return <p>Error: No user ID found.</p>;
   }
-}
 
   const userId = user?.UserId;
   const playlogId = parseInt(id);
@@ -33,17 +29,38 @@ export default async function Share({
   const songsData = await getSongsWithTitles(userId);
   const playlogIds = await generatePlaylogId(playlogId);
 
-  const matchSongToPlaylogId = songsData.filter((song) =>
-    playlogIds.includes(song.id)
-  );
-
-  const songTitles = matchSongToPlaylogId.map((song) => song.title);
-
+  // Filter songsData to match the playlogIds
+  const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
   return (
-    <ul>
-      {songTitles.map((title) => (
-        <li key={title}>{title}</li>
+    <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>
+
+            <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>
       ))}
-    </ul>
+    </div>
   );
 }