"use client"; import React, { useRef, useState } from "react"; import Link from "next/link"; import UserCheckIcon from "../ui/user-check-icon"; import GearIcon from "../ui/gear-icon"; import FilledBellIcon from "../ui/filled-bell-icon"; import MoonIcon from "../ui/moon-icon"; import LogoutIcon from "../ui/logout-icon"; import type { AnimatedIconHandle, AnimatedIconProps } from "../ui/types"; interface DropdownItemProps { icon: React.ComponentType< AnimatedIconProps & React.RefAttributes >; label: string; href?: string; onClick?: () => void; isAnimated?: boolean; rightElement?: React.ReactNode; } const DropdownItem = ({ icon: Icon, label, href, onClick, isAnimated = true, rightElement, }: DropdownItemProps) => { const ref = useRef(null); const startAnimation = () => { if (isAnimated) ref.current?.startAnimation(); }; const stopAnimation = () => { if (isAnimated) ref.current?.stopAnimation(); }; const baseClasses = "group hover:bg-muted flex items-center rounded-xl px-4 py-3 transition-all cursor-pointer w-full"; const content = ( <>

{label}

{rightElement && (

{rightElement}

)} ); if (href) { return ( {content} ); } if (rightElement) { return (

{content}

); } return ( ); }; interface ProfileDropdownProps { isAnimated?: boolean; } const ProfileDropdown = ({ isAnimated = true }: ProfileDropdownProps) => { const [darkMode, setDarkMode] = useState(false); return (

John Doe johndoe@email.com

{}} isAnimated={isAnimated} /> {}} isAnimated={isAnimated} /> {}} isAnimated={isAnimated} /> setDarkMode(!darkMode)} className={`relative flex h-5 w-9 items-center rounded-full transition-colors ${ darkMode ? "bg-primary" : "bg-gray-400" }`} > } /> {}} isAnimated={isAnimated} />

); }; export default ProfileDropdown;

Profile Dropdown

Platform

Category