Avatar 1

"use client"; /** * @author: @dorian_baffier * @description: Avatar Picker * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://clumpui.amardeep.space * @github: https://github.com/kokonut-labs/kokonutui */ import { useState } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Check, Crown, ChevronRight, User2 } from "lucide-react"; interface Avatar { id: number; svg: React.ReactNode; alt: string; } const avatars: Avatar[] = [ { id: 1, svg: ( ), alt: "Avatar 1", }, { id: 2, svg: ( ), alt: "Avatar 4", }, { id: 3, svg: ( ), alt: "Avatar 2", }, { id: 4, svg: ( ), alt: "Avatar 3", }, ]; interface ProfileSetupProps { onComplete?: (data: { username: string; avatarId: number }) => void; className?: string; } const mainAvatarVariants = { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 25 }, }, exit: { scale: 0.9, opacity: 0, transition: { duration: 0.2 }, }, }; const pickerVariants = { container: { initial: { opacity: 0 }, animate: { opacity: 1, transition: { staggerChildren: 0.05, delayChildren: 0.1 }, }, }, item: { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1, transition: { type: "spring", stiffness: 400, damping: 25 }, }, }, }; const DetailRing = () => (

); export default function ProfileSetup({ onComplete, className, }: ProfileSetupProps) { const [selectedAvatar, setSelectedAvatar] = useState(avatars[0]); const [username, setUsername] = useState(""); const [rotationCount, setRotationCount] = useState(0); const [isHovering, setIsHovering] = useState(null); const [isFocused, setIsFocused] = useState(false); const handleAvatarSelect = (avatar: Avatar) => { if (avatar.id === selectedAvatar.id) return; setRotationCount((prev) => prev + 720); setSelectedAvatar(avatar); }; const handleSubmit = () => { if (username.trim() && onComplete) { onComplete({ username: username.trim(), avatarId: selectedAvatar.id, }); } }; const isValid = username.trim().length >= 3; const showError = username.trim().length > 0 && username.trim().length < 3; return (

{/* Header */}

Create Your Profile

Choose an avatar and enter your username to begin

{/* Avatar Section */}

{/* Main Avatar */}

{selectedAvatar.svg}

{/* Avatar Grid */} {avatars.map((avatar) => ( handleAvatarSelect(avatar)} onMouseEnter={() => setIsHovering(avatar.id) } onMouseLeave={() => setIsHovering(null)} className={cn( "relative w-12 h-12 rounded-full group/avatar", "transition-all duration-300", selectedAvatar.id === avatar.id ? "ring-2 ring-primary/30 ring-offset-2 ring-offset-background" : "hover:ring-2 hover:ring-primary/20 hover:ring-offset-2 hover:ring-offset-background" )} variants={pickerVariants.item as any} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} aria-label={`Select ${avatar.alt}`} aria-pressed={ selectedAvatar.id === avatar.id } > {isHovering === avatar.id && ( )}

{avatar.svg}

{selectedAvatar.id === avatar.id && (

)} ))}

{/* Username Input */}

setUsername(e.target.value) } onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} className={cn( "pl-10 h-12 text-base transition-all duration-200", isFocused && "ring-2 ring-primary/20", showError && "ring-2 ring-destructive/50 focus-visible:ring-destructive" )} maxLength={20} />

{showError && ( Username must be at least 3 characters )}

); }