fixed build issues and some alignement issues

app/(password-reset)/forgot-password/page.tsx

@@ -20,7 +20,6 @@ export default function ForgotPassword() {
     <main className="mx-auto flex h-screen max-w-xl flex-col justify-center px-4">
       <Card className="flex flex-col gap-4 p-6">
         <form action={submit} className="flex flex-col gap-4">
-          {" "}
           <h1 className="text-2xl font-light">Reset password</h1>
           <p>
             Enter your email address to get instructions for resetting your

app/(password-reset)/password-reset/[token]/page.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { resetPassword } from "./token";
 
-export default function ({ params }: { params: { token: string } }) {
+export default function SharePage({ params }: { params: { token: string } }) {
   const [error, setError] = useState<string>("");
 
   async function submit(data: FormData) {
@@ -17,8 +17,8 @@ export default function ({ params }: { params: { token: string } }) {
   }
 
   return (
-    <main className="max-w-xl px-4 mx-auto flex flex-col justify-center h-screen ">
+    <main className="mx-auto flex h-screen max-w-xl flex-col justify-center px-4">
-      <Card className="gap-4 flex flex-col p-6 ">
+      <Card className="flex flex-col gap-4 p-6">
         <form action={submit} className="flex flex-col gap-4">
           {" "}
           <h1 className="text-2xl font-light">Choose a new password</h1>
@@ -29,11 +29,11 @@ export default function ({ params }: { params: { token: string } }) {
             type="password"
             placeholder="Confirm password"
           />
-          {error && <p className="text-red-500 text-sm">{error}</p>}
+          {error && <p className="text-sm text-red-500">{error}</p>}
           <Button type="submit">Reset Password</Button>
           <Link
             href="/"
-            className="text-sm text-neutral-700/80 flex items-center"
+            className="flex items-center text-sm text-neutral-700/80"
           >
             <ArrowLeft />
             <span>Return to Login</span>

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

@@ -84,22 +84,22 @@ export default async function Share({
             </div>
           ))}
         </div>
-
         <div className="w-full rounded-sm bg-primary-foreground p-4">
           {chunithm.map((song) => (
             <div key={song.id} className="w-full">
-              <span className="pr-2 text-center text-xl font-bold text-primary">
+              <div className="flex items-center justify-start">
-                {song.isFullCombo && "FULL COMBO!"}
+                <span className="text-xl font-bold text-primary">
-              </span>
+                  {song.isFullCombo ? `FULL COMBO!  ${song.maxCombo}` : ""}
-              <div className="pt-2">
-                <span className="text-center text-xl font-bold text-primary">
-                  Max combo: {song.maxCombo}
                 </span>
+                {!song.isFullCombo && (
+                  <span className="text-xl font-bold text-primary">
+                    Max combo: {song.maxCombo}
+                  </span>
+                )}
               </div>
             </div>
           ))}
         </div>
-
         <div className="w-full rounded-sm bg-primary-foreground p-2">
           {chunithm.map((song) => (
             <div key={song.id} className="w-full">

components/(customization)/avatarcustomization/page.tsx

@@ -249,11 +249,12 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
         <div className="avatar_base">
           {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
             <div className={className} key={key}>
-              <img src={src} alt={""} />
+              <img src={src} alt={key} />
             </div>
           ))}
         </div>
       </div>
+
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/mapiconcustomization/page.tsx

@@ -119,17 +119,15 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
   return (
     <main className="flex flex-col items-center space-y-6">
       <div className="flex w-full justify-center">
-        <div className="">
+        {Object.entries(MapIconTextures).map(([key, { src }]) => (
-          {Object.entries(MapIconTextures).map(([key, { src }]) => (
+          <div key={key}>
-            <div>
+            <img
-              <img
+              className="w-[100px]"
-                className="w-[100px]"
+              src={src}
-                src={src}
+              alt={mapIconId ? `Map Icon ${mapIconId}` : "Default Map Icon"}
-                alt={mapIconId ? `Map Icon ${mapIconId}` : "Default Map Icon"}
+            />
-              />{" "}
+          </div>
-            </div>
+        ))}
-          ))}
-        </div>
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/nameplatecustomization/page.tsx

@@ -119,15 +119,12 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
 
   return (
     <main className="flex flex-col items-center space-y-6">
-      {/* Avatar Customization Section */}
       <div className="flex w-full justify-center">
-        <div className="">
+        {Object.entries(namePlateTextures).map(([key, { src }]) => (
-          {Object.entries(namePlateTextures).map(([key, { src }]) => (
+          <div key={key}>
-            <div>
+            <img className="w-[300px]" src={src} alt={`Name Plate ${key}`} />
-              <img className="w-[300px]" src={src} alt={""} />
+          </div>
-            </div>
+        ))}
-          ))}
-        </div>
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/systemvoicecustomization/page.tsx

@@ -126,15 +126,16 @@ export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
 
   return (
     <main className="flex flex-col items-center space-y-6">
-      {/* Avatar Customization Section */}
       <div className="flex w-full justify-center">
-        <div className="">
+        {Object.entries(systemVoiceTextures).map(([key, { src }]) => (
-          {Object.entries(systemVoiceTextures).map(([key, { src }]) => (
+          <div key={key}>
-            <div>
+            <img
-              <img className="w-[200px]" src={src} alt={""} />
+              className="w-[200px]"
-            </div>
+              src={src}
-          ))}
+              alt={`System Voice Texture ${key}`}
-        </div>
+            />
+          </div>
+        ))}
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/trophycustomization/page.tsx

@@ -102,8 +102,6 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
 
   return (
     <main className="flex flex-col items-center space-y-6">
-      {/* Avatar Customization Section */}
-
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/scoreplaylog/colums.tsx

@@ -21,7 +21,7 @@ import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
 import { chuni_score_best } from "@/prisma/schemas/artemis/generated/artemis";
 import { getDifficultyText, getGrade } from "@/lib/helpers";
 import { Skeleton } from "../ui/skeleton";
-
+import ActionsCell from "./moreAction";
 type chunithm = chuni_score_playlog & chuni_static_music & chuni_score_best;
 
 export const columns: ColumnDef<chunithm>[] = [
@@ -161,47 +161,10 @@ export const columns: ColumnDef<chunithm>[] = [
       <div className="font-medium">{row.original.playCount}</div>
     ),
   },
-
+  // for fixing react-hooks/rules-of-hooks
   {
     id: "actions",
     header: () => <div className="pl-2 text-left">More</div>,
-    cell: ({ row }) => {
+    cell: ({ row }) => <ActionsCell row={row} />,
-      const [error, setError] = useState<string>("");
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const router = useRouter();
-
-      const handleGenerateShareToken = async () => {
-        const { token, error } = await generateShareToken(row.original.id);
-        if (error) {
-          setError(error);
-        } else {
-          const newTab = window.open(`/${token}/${row.original.id}`);
-          if (newTab) {
-            newTab.focus();
-          } else {
-            router.push(`/${token}/${row.original.id}`);
-          }
-        }
-      };
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={handleGenerateShareToken}>
-              Share Song
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
   },
 ];

components/scoreplaylog/moreAction.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { MoreHorizontal } from "lucide-react";
+import { generateShareToken } from "@/app/(sharing)/[token]/token";
+
+interface ActionsCellProps {
+  row: any; //unsure what to use here
+}
+
+const ActionsCell: React.FC<ActionsCellProps> = ({ row }) => {
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  const handleGenerateShareToken = async () => {
+    const { token, error } = await generateShareToken(row.original.id);
+    if (error) {
+      setError(error);
+    } else {
+      const newTab = window.open(`/${token}/${row.original.id}`);
+      if (newTab) {
+        newTab.focus();
+      } else {
+        router.push(`/${token}/${row.original.id}`);
+      }
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleGenerateShareToken}>
+          Share Song
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ActionsCell;