From 38d97e5a1cd2311fad305d9e5f92505674e0f037 Mon Sep 17 00:00:00 2001
From: Polaris <polaris@example.com>
Date: Wed, 24 Jul 2024 15:18:05 -0400
Subject: [PATCH] static avatar resources

---
 app/(authenticated)/chunithm/page.tsx   |  11 +-
 app/globals.css                         |  19 +-
 components/avatarcustomization/page.tsx | 736 +++++++++++++-----------
 3 files changed, 406 insertions(+), 360 deletions(-)

diff --git a/app/(authenticated)/chunithm/page.tsx b/app/(authenticated)/chunithm/page.tsx
index c06b564..ac52baf 100644
--- a/app/(authenticated)/chunithm/page.tsx
+++ b/app/(authenticated)/chunithm/page.tsx
@@ -10,25 +10,25 @@ import { getAllAvatarParts } from "@/components/avatarcustomization/actions";
 // the number is the category id for the specific part
 
 const getAvatarHeadAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(2);
+  const avatarParts = await getAllAvatarParts(2); // head
   return { avatarParts };
 };
 
 const getAvatarFaceAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(3);
+  const avatarParts = await getAllAvatarParts(3); // face
   return { avatarParts };
 };
 
 const getAvatarItemAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(5);
+  const avatarParts = await getAllAvatarParts(5); // item_l item_r
   return { avatarParts };
 };
 const getAvatarBackAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(7);
+  const avatarParts = await getAllAvatarParts(7); // back
   return { avatarParts };
 };
 const getAvatarWearAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(1);
+  const avatarParts = await getAllAvatarParts(1); // wear
   return { avatarParts };
 };
 
@@ -59,6 +59,7 @@ const Page = async () => {
               avatarWearSelectionData={AvatarWearAccessories}
             />
           </div>
+          <div></div>
         </TabsContent>
       </Tabs>
     </div>
diff --git a/app/globals.css b/app/globals.css
index fe889b7..38652fe 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -76,29 +76,12 @@
   }
 
 
-  g,
+img,
 video {
   max-width: revert;
   height: revert;
 }
 
-.rainbow-text {
-  background: linear-gradient(
-    to left,
-    violet,
-    indigo,
-    blue,
-    green,
-    yellow,
-    orange,
-    red
-  );
-  -webkit-background-clip: text;
-  color: transparent;
-  background-clip: text;
-  color: transparent;
-}
-
 /*
 * CHUSAN AVATAR
 */
diff --git a/components/avatarcustomization/page.tsx b/components/avatarcustomization/page.tsx
index 01bae59..4fbfdfb 100644
--- a/components/avatarcustomization/page.tsx
+++ b/components/avatarcustomization/page.tsx
@@ -93,349 +93,411 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
     });
   }
 
+  const AvatarTextures: Record<string, { src: string; className: string }> = {
+    AvatarFaceStatic: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
+      className: "avatar_face_static",
+    },
+    AvatarSkin: {
+      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${1400001}.png`,
+      className: "avatar_skin",
+    },
+    AvatarRightHand: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png",
+      className: "avatar_hand_r",
+    },
+    AvatarLeftHand: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png",
+      className: "avatar_hand_l",
+    },
+    AvatarSkinFootL: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
+      className: "avatar_skinfoot_l",
+    },
+    AvatarSkinFootR: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
+      className: "avatar_skinfoot_r",
+    },
+
+    AvatarHeadAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06202301.png",
+      className: "avatar_head",
+    },
+
+    AvatarItemAccessoryR: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06502401.png",
+      className: "avatar_item_r",
+    },
+    AvatarItemAccessoryL: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06502401.png",
+      className: "avatar_item_l",
+    },
+    AvatarBackAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06703301.png",
+      className: "avatar_back",
+    },
+    AvatarWearAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_04103101.png",
+      className: "avatar_wear",
+    },
+
+    AvatarFace: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_02300003.png",
+      className: "avatar_face",
+    },
+    // not in use
+    AvatarFront: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01600001.png",
+      className: "avatar_front",
+    },
+  };
+
   return (
-    <main>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-          <FormField
-            control={form.control}
-            name="AvatarHeadAccessory"
-            render={({ field }) => (
-              <FormItem className="flex flex-col">
-                <FormLabel>Avatar Head Item</FormLabel>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <FormControl>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        className={cn(
-                          "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
-                        )}
-                      >
-                        {field.value
-                          ? avatarHeadSelectionData.avatarParts.find(
-                              (part) => part.avatarAccessoryId === field.value
-                            )?.name
-                          : "Select Avatar Head Item"}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </FormControl>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Command>
-                      {/* bugged  */}
-                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
-                      <CommandList>
-                        <CommandEmpty>No avatar part found.</CommandEmpty>
-                        <CommandGroup>
-                          {avatarHeadSelectionData.avatarParts.map((part) => (
-                            <CommandItem
-                              value={part.name ?? ""}
-                              key={part.avatarAccessoryId}
-                              onSelect={() => {
-                                form.setValue(
-                                  "AvatarHeadAccessory",
-                                  part.avatarAccessoryId!
-                                );
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  part.avatarAccessoryId === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
-                                )}
-                              />
-                              {part.name}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
+    <main className="flex">
+      {" "}
+      <div>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+              control={form.control}
+              name="AvatarHeadAccessory"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Avatar Head Item</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className={cn(
+                            "w-[300px] justify-between",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value
+                            ? avatarHeadSelectionData.avatarParts.find(
+                                (part) => part.avatarAccessoryId === field.value
+                              )?.name
+                            : "Select Avatar Head Item"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0">
+                      <Command>
+                        {/* bugged  */}
+                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                        <CommandList>
+                          <CommandEmpty>No avatar part found.</CommandEmpty>
+                          <CommandGroup>
+                            {avatarHeadSelectionData.avatarParts.map((part) => (
+                              <CommandItem
+                                value={part.name ?? ""}
+                                key={part.avatarAccessoryId}
+                                onSelect={() => {
+                                  form.setValue(
+                                    "AvatarHeadAccessory",
+                                    part.avatarAccessoryId!
+                                  );
+                                  console.log(part.avatarAccessoryId);
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    part.avatarAccessoryId === field.value
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                {part.name}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="AvatarFaceAccessory"
-            render={({ field }) => (
-              <FormItem className="flex flex-col">
-                <FormLabel>Avatar Face Item</FormLabel>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <FormControl>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        className={cn(
-                          "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
-                        )}
-                      >
-                        {field.value
-                          ? avatarFaceSelectionData.avatarParts.find(
-                              (part) => part.avatarAccessoryId === field.value
-                            )?.name
-                          : "Select Avatar Face Item"}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </FormControl>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Command>
-                      {/* bugged  */}
-                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
-                      <CommandList>
-                        <CommandEmpty>No language found.</CommandEmpty>
-                        <CommandGroup>
-                          {avatarFaceSelectionData.avatarParts.map((part) => (
-                            <CommandItem
-                              value={part.name ?? ""}
-                              key={part.avatarAccessoryId}
-                              onSelect={() => {
-                                form.setValue(
-                                  "AvatarFaceAccessory",
-                                  part.avatarAccessoryId!
-                                );
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  part.avatarAccessoryId === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
-                                )}
-                              />
-                              {part.name}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="AvatarFaceAccessory"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Avatar Face Item</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className={cn(
+                            "w-[300px] justify-between",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value
+                            ? avatarFaceSelectionData.avatarParts.find(
+                                (part) => part.avatarAccessoryId === field.value
+                              )?.name
+                            : "Select Avatar Face Item"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0">
+                      <Command>
+                        {/* bugged  */}
+                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                        <CommandList>
+                          <CommandEmpty>No language found.</CommandEmpty>
+                          <CommandGroup>
+                            {avatarFaceSelectionData.avatarParts.map((part) => (
+                              <CommandItem
+                                value={part.name ?? ""}
+                                key={part.avatarAccessoryId}
+                                onSelect={() => {
+                                  form.setValue(
+                                    "AvatarFaceAccessory",
+                                    part.avatarAccessoryId!
+                                  );
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    part.avatarAccessoryId === field.value
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                {part.name}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="AvatarItemAccessory"
-            render={({ field }) => (
-              <FormItem className="flex flex-col">
-                <FormLabel>Avatar Hand Item</FormLabel>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <FormControl>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        className={cn(
-                          "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
-                        )}
-                      >
-                        {field.value
-                          ? avatarItemSelectionData.avatarParts.find(
-                              (part) => part.avatarAccessoryId === field.value
-                            )?.name
-                          : "Select Avatar Head Item"}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </FormControl>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Command>
-                      {/* bugged  */}
-                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
-                      <CommandList>
-                        <CommandEmpty>No avatar part found.</CommandEmpty>
-                        <CommandGroup>
-                          {avatarItemSelectionData.avatarParts.map((part) => (
-                            <CommandItem
-                              value={part.name ?? ""}
-                              key={part.avatarAccessoryId}
-                              onSelect={() => {
-                                form.setValue(
-                                  "AvatarItemAccessory",
-                                  part.avatarAccessoryId!
-                                );
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  part.avatarAccessoryId === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
-                                )}
-                              />
-                              {part.name}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="AvatarItemAccessory"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Avatar Hand Item</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className={cn(
+                            "w-[300px] justify-between",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value
+                            ? avatarItemSelectionData.avatarParts.find(
+                                (part) => part.avatarAccessoryId === field.value
+                              )?.name
+                            : "Select Avatar Head Item"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0">
+                      <Command>
+                        {/* bugged  */}
+                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                        <CommandList>
+                          <CommandEmpty>No avatar part found.</CommandEmpty>
+                          <CommandGroup>
+                            {avatarItemSelectionData.avatarParts.map((part) => (
+                              <CommandItem
+                                value={part.name ?? ""}
+                                key={part.avatarAccessoryId}
+                                onSelect={() => {
+                                  form.setValue(
+                                    "AvatarItemAccessory",
+                                    part.avatarAccessoryId!
+                                  );
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    part.avatarAccessoryId === field.value
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                {part.name}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="AvatarBackAccessory"
-            render={({ field }) => (
-              <FormItem className="flex flex-col">
-                <FormLabel>Avatar Back Item</FormLabel>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <FormControl>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        className={cn(
-                          "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
-                        )}
-                      >
-                        {field.value
-                          ? avatarBackSelectionData.avatarParts.find(
-                              (part) => part.avatarAccessoryId === field.value
-                            )?.name
-                          : "Select Avatar Back Item"}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </FormControl>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Command>
-                      {/* bugged  */}
-                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
-                      <CommandList>
-                        <CommandEmpty>No avatar part found.</CommandEmpty>
-                        <CommandGroup>
-                          {avatarBackSelectionData.avatarParts.map((part) => (
-                            <CommandItem
-                              value={part.name ?? ""}
-                              key={part.avatarAccessoryId}
-                              onSelect={() => {
-                                form.setValue(
-                                  "AvatarBackAccessory",
-                                  part.avatarAccessoryId!
-                                );
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  part.avatarAccessoryId === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
-                                )}
-                              />
-                              {part.name}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="AvatarBackAccessory"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Avatar Back Item</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className={cn(
+                            "w-[300px] justify-between",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value
+                            ? avatarBackSelectionData.avatarParts.find(
+                                (part) => part.avatarAccessoryId === field.value
+                              )?.name
+                            : "Select Avatar Back Item"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0">
+                      <Command>
+                        {/* bugged  */}
+                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                        <CommandList>
+                          <CommandEmpty>No avatar part found.</CommandEmpty>
+                          <CommandGroup>
+                            {avatarBackSelectionData.avatarParts.map((part) => (
+                              <CommandItem
+                                value={part.name ?? ""}
+                                key={part.avatarAccessoryId}
+                                onSelect={() => {
+                                  form.setValue(
+                                    "AvatarBackAccessory",
+                                    part.avatarAccessoryId!
+                                  );
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    part.avatarAccessoryId === field.value
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                {part.name}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="AvatarWearAccessory"
-            render={({ field }) => (
-              <FormItem className="flex flex-col">
-                <FormLabel>Avatar Body Item</FormLabel>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <FormControl>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        className={cn(
-                          "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
-                        )}
-                      >
-                        {field.value
-                          ? avatarWearSelectionData.avatarParts.find(
-                              (part) => part.avatarAccessoryId === field.value
-                            )?.name
-                          : "Select Avatar Body Item"}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </FormControl>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Command>
-                      {/* bugged  */}
-                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
-                      <CommandList>
-                        <CommandEmpty>No avatar part found.</CommandEmpty>
-                        <CommandGroup>
-                          {avatarWearSelectionData.avatarParts.map((part) => (
-                            <CommandItem
-                              value={part.name ?? ""}
-                              key={part.avatarAccessoryId}
-                              onSelect={() => {
-                                form.setValue(
-                                  "AvatarWearAccessory",
-                                  part.avatarAccessoryId!
-                                );
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  part.avatarAccessoryId === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
-                                )}
-                              />
-                              {part.name}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="AvatarWearAccessory"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Avatar Body Item</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className={cn(
+                            "w-[300px] justify-between",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value
+                            ? avatarWearSelectionData.avatarParts.find(
+                                (part) => part.avatarAccessoryId === field.value
+                              )?.name
+                            : "Select Avatar Body Item"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0">
+                      <Command>
+                        {/* bugged  */}
+                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                        <CommandList>
+                          <CommandEmpty>No avatar part found.</CommandEmpty>
+                          <CommandGroup>
+                            {avatarWearSelectionData.avatarParts.map((part) => (
+                              <CommandItem
+                                value={part.name ?? ""}
+                                key={part.avatarAccessoryId}
+                                onSelect={() => {
+                                  form.setValue(
+                                    "AvatarWearAccessory",
+                                    part.avatarAccessoryId!
+                                  );
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    part.avatarAccessoryId === field.value
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                {part.name}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type="submit">Submit</Button>
-        </form>
-      </Form>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit">Submit</Button>
+          </form>
+        </Form>
+      </div>
+      {/* Avatar Customization Section */}
+      <div className="w-1/2 flex flex-col items-center">
+        <div className="avatar_base">
+          {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
+            <div className={className} key={key}>
+              <img src={src} alt={key} />
+            </div>
+          ))}
+        </div>
+      </div>
     </main>
   );
 };
-
-{
-  /* <div>State is: {state}</div>
-      <div>Server data:</div>
-      <div></div>
-      <ul>
-        {avatarSelectionData.avatarParts.map((part) => (
-          <li key={part.avatarAccessoryId}>{part.name}</li>
-        ))}
-      </ul> */
-}