useBestFriends();

components/site/OutfitQuickChooser.tsx

@@ -0,0 +1,52 @@
+"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>
+	);
+}