"use client"; import { useState, useEffect } from "react"; import { Check, ChevronUp, BarChart3, Settings, Grid3X3, Crown, DoorOpen, Sun, Moon, } from "lucide-react"; import { useTheme } from "next-themes"; import Image from "next/image"; import { motion, AnimatePresence } from "framer-motion"; export default function WalletProfile() { const { theme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); const [isOpen, setIsOpen] = useState(true); useEffect(() => { setMounted(true); }, []); if (!mounted) { return null; } const menuItems = [ { icon: , label: "Activity log" }, { icon: , label: "Settings" }, { icon: , label: "Integrations" }, { icon: , label: "Upgrade to Pro", action: true, actionLabel: "Upgrade", }, { icon: , label: "Sign out", danger: true, }, ]; return (

{/* Profile Header */}

Arihant Jain

Product Designer • hey@arihantcodes.in

setIsOpen(!isOpen)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} >

{isOpen && ( {/* Card Section */}

Arihant Jain

10/28

4242 4242 4242 4242

{/* Theme Toggle */}

setTheme("light")} whileHover={{ scale: theme !== "light" ? 1.03 : 1 }} whileTap={{ scale: 0.97 }} transition={{ type: "spring", stiffness: 400, damping: 17 }} > Light mode setTheme("dark")} whileHover={{ scale: theme !== "dark" ? 1.03 : 1 }} whileTap={{ scale: 0.97 }} transition={{ type: "spring", stiffness: 400, damping: 17 }} > Dark mode

{/* Menu Items */}

{menuItems.map((item, index) => (

{item.icon} {item.label}

{item.action && ( {item.actionLabel} )} ))}

{/* Footer */}

Spectrum UI

v1.2

)}

); }

Profile Dropdown

Installation

Design Credit -