"use client"; import { Content as PopoverContent, Portal as PopoverPortal, Root as PopoverRoot, Trigger as PopoverTrigger, } from "@radix-ui/react-popover"; import { Eye, Package, User } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useState } from "react"; export interface UserData { name: string; email: string; avatar: string; } export interface Order { id: string; date: string; status: "processing" | "shipped" | "delivered"; progress: number; } export interface UserAccountAvatarProps { user: UserData; orders?: Order[]; onProfileSave?: (user: UserData) => void; onOrderView?: (orderId: string) => void; className?: string; } const mockOrders: Order[] = [ { id: "ORD001", date: "2023-03-15", status: "delivered", progress: 100 }, { id: "ORD002", date: "2023-03-20", status: "shipped", progress: 66 }, ]; export default function UserAccountAvatar({ user, orders = mockOrders, onProfileSave, onOrderView, className = "", }: UserAccountAvatarProps) { const [activeSection, setActiveSection] = useState(null); const [userData, setUserData] = useState(user); const shouldReduceMotion = useReducedMotion(); const handleSectionClick = (section: string) => { setActiveSection(activeSection === section ? null : section); }; const handleProfileSave = (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); const updatedUser = { ...userData, name: formData.get("name") as string, email: formData.get("email") as string, }; setUserData(updatedUser); if (onProfileSave) { onProfileSave(updatedUser); } setActiveSection(null); }; const renderEditProfile = () => ( ); const getStatusColor = (status: Order["status"]) => { if (status === "processing") { return "bg-blue-500"; } if (status === "shipped") { return "bg-amber-500"; } return "bg-emerald-500"; }; const renderLastOrders = () => (

{orders.map((order) => (

{order.id}

{order.date}

{order.status} {order.progress}%

))}

); return ( e.preventDefault()} sideOffset={8} style={{ pointerEvents: "auto" }} >

{activeSection === "profile" && ( {renderEditProfile()} )} {activeSection === "orders" && ( {renderLastOrders()} )}

); }

User Account Avatar

Installation

Features

Props

On this page