styled userbox page and removed sticky nav

This commit is contained in:
Polaris
2024-07-28 01:10:53 -04:00
parent de16235316
commit e113bad219
8 changed files with 53 additions and 42 deletions

View File

@ -216,7 +216,17 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
};
return (
<main className="flex">
<main className="flex flex-col items-center space-y-6">
{/* Avatar Customization Section */}
<div className="w-full flex justify-center">
<div className="avatar_base">
{Object.entries(AvatarTextures).map(([key, { className, src }]) => (
<div className={className} key={key}>
<img src={src} alt={""} />
</div>
))}
</div>
</div>
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@ -546,15 +556,6 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
</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={""} />
</div>
))}
</div>
</div>
</main>
);
};

View File

@ -104,7 +104,17 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
};
return (
<main className="flex">
<main className="flex flex-col items-center space-y-6">
{/* Avatar Customization Section */}
<div className="w-full flex justify-center">
<div className="">
{Object.entries(AvatarTextures).map(([key, { src }]) => (
<div>
<img className="w-[100px]" src={src} alt={""} />
</div>
))}
</div>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
@ -173,13 +183,6 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
</div>
</form>
</Form>
<div className="w-1/2 flex flex-col items-center">
{Object.entries(AvatarTextures).map(([key, { src }]) => (
<div className="" key={key}>
<img src={src} alt="" className=" w-300 h-32 object-contain" />
</div>
))}
</div>
</main>
);
};

View File

@ -104,7 +104,17 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
};
return (
<main className="flex">
<main className="flex flex-col items-center space-y-6">
{/* Avatar Customization Section */}
<div className="w-full flex justify-center">
<div className="">
{Object.entries(AvatarTextures).map(([key, { src }]) => (
<div>
<img className="w-[300px]" src={src} alt={""} />
</div>
))}
</div>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
@ -175,13 +185,6 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
</div>
</form>
</Form>
<div className="w-1/2 flex flex-col items-center">
{Object.entries(AvatarTextures).map(([key, { src }]) => (
<div className="" key={key}>
<img src={src} alt="" className=" w-300 h-32 object-contain" />
</div>
))}
</div>
</main>
);
};

View File

@ -107,7 +107,17 @@ export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
};
return (
<main className="flex">
<main className="flex flex-col items-center space-y-6">
{/* Avatar Customization Section */}
<div className="w-full flex justify-center">
<div className="">
{Object.entries(AvatarTextures).map(([key, { src }]) => (
<div>
<img className="w-[200px]" src={src} alt={""} />
</div>
))}
</div>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
@ -178,13 +188,6 @@ export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
</div>
</form>
</Form>
<div className="w-1/2 flex flex-col items-center">
{Object.entries(AvatarTextures).map(([key, { src }]) => (
<div className="" key={key}>
<img src={src} alt="" className=" w-300 h-32 object-contain" />
</div>
))}
</div>
</main>
);
};

View File

@ -87,7 +87,9 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
}
return (
<main className="flex">
<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">
@ -105,12 +107,12 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
!field.value && "text-muted-foreground",
)}
>
{field.value
? playerTrophySelectionData.statictrophies.find(
(part) => part.id === field.value
(part) => part.id === field.value,
)?.str
: "Select Trophy"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@ -136,12 +138,12 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
"mr-2 h-4 w-4",
part.id === field.value
? "opacity-100"
: "opacity-0"
: "opacity-0",
)}
/>
{part.str}
</CommandItem>
)
),
)}
</CommandGroup>
</CommandList>