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>

View File

@ -2,7 +2,6 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ModeToggle } from "../darkmode";
const NAV_ITEMS = [
{ href: "/home", label: "Home" },

View File

@ -23,7 +23,7 @@ const HeaderNavigation = async () => {
return (
<>
{user && (
<header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<header className="top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<NavigationMenuDesktop />
<Sheet>
<SheetTrigger asChild>
@ -81,7 +81,7 @@ const HeaderNavigation = async () => {
)}
<DropdownMenuSeparator />
<form action={signOut}>
<Button className="bg-transparent text-primary hover:bg-transparent pl-2 font-normal">
<Button className="bg-transparent pl-2 font-normal text-primary hover:bg-transparent">
Logout
</Button>
</form>