"use client"; /** * @author: @dorian_baffier * @description: Team Selector * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://clumpui.amardeep.space * @github: https://github.com/kokonut-labs/kokonutui */ import { AnimatePresence, motion, type Variants } from "motion/react"; import Image from "next/image"; import { useState } from "react"; const MAX_TEAM_SIZE = 4; interface TeamMember { id: string; avatarUrl: string; name: string; } const TEAM_MEMBERS: TeamMember[] = [ { id: "member-1", avatarUrl: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-01-n0x8HFv8EUetf9z6ht0wScJKoTHqf8.png", name: "Team Member 1", }, { id: "member-2", avatarUrl: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-02-albo9B0tWOSLXCVZh9rX9KFxXIVWMr.png", name: "Team Member 2", }, { id: "member-3", avatarUrl: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-03-JateJIUhtd3PXynaMG9TDWQ55j5AVP.png", name: "Team Member 3", }, { id: "member-4", avatarUrl: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-04-uuYHWIRvVPi01gEt6NwnGyjqLeeZhz.png", name: "Team Member 4", }, ] as const; const animations = { container: { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, } satisfies Variants, avatar: { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1, transition: { duration: 0.3 }, }, exit: { opacity: 0, scale: 0.8, transition: { duration: 0.15 }, }, } satisfies Variants, vibration: { initial: { x: 0 }, animate: { x: [-5, 5, -5, 5, 0] as const, transition: { duration: 0.3 }, }, } satisfies Variants, number: { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1, transition: { type: "spring", stiffness: 400, damping: 25, }, }, } satisfies Variants, } as const; interface TeamSelectorProps { defaultValue?: number; onChange?: (size: number) => void; className?: string; } export default function TeamSelector({ defaultValue = 1, onChange, className = "", }: TeamSelectorProps) { const [peopleCount, setPeopleCount] = useState(defaultValue); const [isVibrating, setIsVibrating] = useState(false); const handleIncrement = (e: React.MouseEvent | React.KeyboardEvent) => { e.preventDefault(); if (peopleCount < MAX_TEAM_SIZE) { const newCount = peopleCount + 1; setPeopleCount(newCount); onChange?.(newCount); } else { triggerVibration(); } }; const handleDecrement = (e: React.MouseEvent | React.KeyboardEvent) => { e.preventDefault(); if (peopleCount > 1) { const newCount = peopleCount - 1; setPeopleCount(newCount); onChange?.(newCount); } else { triggerVibration(); } }; const triggerVibration = () => { setIsVibrating(true); setTimeout(() => setIsVibrating(false), 300); }; const handleKeyDown = ( e: React.KeyboardEvent, action: "increment" | "decrement" ) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); action === "increment" ? handleIncrement(e) : handleDecrement(e); } }; const renderAvatars = () => TEAM_MEMBERS.slice(0, peopleCount).map((member, index) => ( {member.name}

)); return (

Team size selector

{renderAvatars()}

{peopleCount}

); }