59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useAvatarOutfits } from "@/hooks/roblox/useAvatarOutfits";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn, proxyFetch } from "@/lib/utils";
|
|
import LazyLoadedImage from "../util/LazyLoadedImage";
|
|
import { StupidHoverThing } from "../util/MiscStuff";
|
|
import { loadThumbnails } from "@/lib/thumbnailLoader";
|
|
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
|
|
|
|
type OutfitSelectorProps = {
|
|
setVisible: (visible: boolean) => void;
|
|
updateOutfit: (
|
|
outfit: { id: number },
|
|
acc: { id: number }
|
|
) => Promise<void>;
|
|
};
|
|
|
|
export function OutfitSelector({
|
|
setVisible,
|
|
updateOutfit
|
|
}: OutfitSelectorProps) {
|
|
const outfits = useAvatarOutfits();
|
|
const acc = useCurrentAccount();
|
|
|
|
if (!outfits || !acc) return null;
|
|
|
|
return (
|
|
<div className="z-30 isolate absolute inset-0 flex items-center justify-center bg-crust/50">
|
|
<button
|
|
className="z-10 absolute w-screen h-screen cursor-default"
|
|
onClick={() => {
|
|
setVisible(false);
|
|
}}
|
|
/>
|
|
<div className="z-20 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 p-8 bg-crust/90 rounded-xl">
|
|
{(outfits || []).map((outfit: { id: number; name: string }) => (
|
|
<button
|
|
key={outfit.id}
|
|
className="hover:bg-base/50 rounded-lg"
|
|
onClick={async () => {
|
|
updateOutfit(outfit, acc);
|
|
setVisible(false);
|
|
}}
|
|
>
|
|
<StupidHoverThing delayDuration={0} text={outfit.name}>
|
|
<LazyLoadedImage
|
|
imgId={`Outfit_${outfit.id}`}
|
|
alt={outfit.name}
|
|
className="w-32 h-32 rounded-md"
|
|
/>
|
|
</StupidHoverThing>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|