components/examples/profile-dropdown.tsx (4)

57-59: Consider making badge styling configurable.

The badge uses hardcoded purple colors (bg-purple-200, text-purple-800). Consider accepting badge styling as a prop to make the component more flexible.

♻️ Proposed enhancement

 interface ProfileDropdownItemProps {
   icon: React.ComponentType<
     AnimatedIconProps & React.RefAttributes<AnimatedIconHandle>
   >;
   label: string;
   href: string;
   badge?: string;
+  badgeClassName?: string;
   isAnimated?: boolean;
 }

 const ProfileDropdownItem = ({
   icon: Icon,
   label,
   href,
   badge,
+  badgeClassName = "rounded-full bg-purple-200 px-2 py-0.5 text-xs font-semibold text-purple-800",
   isAnimated = true,
 }: ProfileDropdownItemProps) => {
   // ... rest of component

   {badge && (
-    <span className="rounded-full bg-purple-200 px-2 py-0.5 text-xs font-semibold text-purple-800">
+    <span className={badgeClassName}>
       {badge}
     </span>
   )}

---

77-89: Consider making menu items configurable.

The menu items are hardcoded within the component. For better reusability, consider accepting items as a prop with sensible defaults.

♻️ Proposed enhancement

 interface ProfileDropdownProps {
   avatarSrc?: string;
   isAnimated?: boolean;
+  items?: ProfileDropdownItemProps[];
 }

 const ProfileDropdown = ({
   avatarSrc,
   isAnimated = true,
+  items: customItems,
 }: ProfileDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);

-  const items: ProfileDropdownItemProps[] = [
+  const defaultItems: ProfileDropdownItemProps[] = [
     { icon: UserPlusIcon, label: "Profile", href: "#", isAnimated },
     { icon: MessageCircleIcon, label: "Community", href: "#", isAnimated },
     {
       icon: CreditCard,
       label: "Subscription",
       href: "#",
       badge: "PRO",
       isAnimated,
     },
     { icon: GearIcon, label: "Settings", href: "#", isAnimated },
     { icon: LogoutIcon, label: "Sign Out", href: "#", isAnimated },
   ];

+  const items = customItems || defaultItems;

---

107-111: Add error handling for avatar image loading.

Consider adding an onError handler to gracefully handle cases where the avatar image fails to load.

♻️ Proposed enhancement

+  const [avatarError, setAvatarError] = useState(false);
+
   return (
     <div ref={dropdownRef} className="relative inline-block">
       <button
         onClick={() => setIsOpen((prev) => !prev)}
         className="hover:ring-accent flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-all hover:ring-2"
       >
-        <img
-          src={avatarSrc || "/default-avatar.jpg"}
-          alt="User avatar"
-          className="h-10 w-10 rounded-full object-cover"
-        />
+        {!avatarError ? (
+          <img
+            src={avatarSrc || "/default-avatar.jpg"}
+            alt="User avatar"
+            className="h-10 w-10 rounded-full object-cover"
+            onError={() => setAvatarError(true)}
+          />
+        ) : (
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200">
+            <span className="text-sm font-semibold text-gray-600">?</span>
+          </div>
+        )}
       </button>

---

123-125: Consider closing dropdown on item click.

For better UX, the dropdown should close when a user clicks on a menu item. Currently, it remains open after navigation.

♻️ Proposed enhancement

           >
             {items.map((item) => (
-              <ProfileDropdownItem key={item.label} {...item} />
+              <ProfileDropdownItem 
+                key={item.label} 
+                {...item} 
+                onClick={() => setIsOpen(false)}
+              />
             ))}
           </motion.div>

And update ProfileDropdownItem to accept and use the onClick:

 interface ProfileDropdownItemProps {
   icon: React.ComponentType<
     AnimatedIconProps & React.RefAttributes<AnimatedIconHandle>
   >;
   label: string;
   href: string;
   badge?: string;
   isAnimated?: boolean;
+  onClick?: () => void;
 }

 const ProfileDropdownItem = ({
   icon: Icon,
   label,
   href,
   badge,
   isAnimated = true,
+  onClick,
 }: ProfileDropdownItemProps) => {
   // ... existing code ...
   
   return (
     <Link
       href={href}
       className="group hover:bg-accent hover:text-accent-foreground flex items-center justify-between gap-3 rounded-md px-4 py-2 transition-colors"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onClick={onClick}
     >

Configuration used: defaults

Review profile: CHILL

Plan: Pro

components/examples/profile-dropdown.tsx (4)

33-39: Wrap handlers in useCallback for performance.

The handleMouseEnter and handleMouseLeave functions are recreated on every render. While this won't cause functional issues, wrapping them in useCallback would prevent unnecessary re-creations.

♻️ Optimize handlers with useCallback

+import React, { useState, useRef, useEffect, useCallback } from "react";

...

  const ref = useRef<AnimatedIconHandle>(null);

- const handleMouseEnter = () => {
+ const handleMouseEnter = useCallback(() => {
    if (isAnimated) ref.current?.startAnimation();
- };
+ }, [isAnimated]);

- const handleMouseLeave = () => {
+ const handleMouseLeave = useCallback(() => {
    if (isAnimated) ref.current?.stopAnimation();
- };
+ }, [isAnimated]);

---

41-43: Consider consolidating animation control logic.

The useEffect calls stopAnimation() whenever isAnimated becomes false, which is correct. However, consider whether starting the animation when isAnimated becomes true again is desired behavior, as currently it only stops but never auto-starts.

---

57-61: Consider making badge styling configurable.

The badge uses hardcoded purple colors (bg-purple-200, text-purple-800). Consider accepting badge color variants as a prop if multiple badge types will be needed in the future.

---

78-90: Memoize the items array to prevent unnecessary re-renders.

The items array is recreated on every render, which can cause unnecessary re-renders of child components. Since it only depends on isAnimated, wrap it in useMemo.

♻️ Memoize items array

+import React, { useState, useRef, useEffect, useMemo } from "react";

...

- const items: ProfileDropdownItemProps[] = [
+ const items: ProfileDropdownItemProps[] = useMemo(() => [
    { icon: UserPlusIcon, label: "Profile", href: "#", isAnimated },
    { icon: MessageCircleIcon, label: "Community", href: "#", isAnimated },
    {
      icon: CreditCard,
      label: "Subscription",
      href: "#",
      badge: "PRO",
      isAnimated,
    },
    { icon: GearIcon, label: "Settings", href: "#", isAnimated },
    { icon: LogoutIcon, label: "Sign Out", href: "#", isAnimated },
- ];
+ ], [isAnimated]);

Configuration used: defaults

Review profile: CHILL

Plan: Pro

components/examples/profile-dropdown.tsx (2)

6-6: Inconsistent motion import path.

This file imports from "framer-motion" while the icon components (e.g., message-circle-icon.tsx, gear-icon.tsx) import from "motion/react". For consistency and to ensure the same module instance is used, consider aligning the import path.

Suggested fix

-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence } from "motion/react";

---

115-128: Add aria-haspopup for improved accessibility.

The button has good accessibility attributes, but adding aria-haspopup="menu" would better communicate the dropdown's purpose to screen readers.

Suggested fix

       <button
         onClick={() => setIsOpen((prev) => !prev)}
         aria-label="Toggle profile menu"
         aria-expanded={isOpen}
+        aria-haspopup="menu"
         className="hover:ring-accent flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-all hover:ring-2"
       >

components/ui/message-circle-icon.tsx (1)

42-48: Remove unused functions.

handleHoverStart and handleHoverEnd are defined but never used. The onHoverStart and onHoverEnd props directly reference start and stop.

Suggested fix

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (

components/ui/gear-icon.tsx (1)

39-45: Remove unused functions.

handleHoverStart and handleHoverEnd are defined but never used, similar to message-circle-icon.tsx. The hover handlers directly reference start and stop.

Suggested fix

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (

components/ui/credit-card.tsx (2)

12-52: Wrap start and stop in useCallback for consistency and stability.

Unlike LogoutIcon which correctly uses useCallback, these functions are recreated on every render. This creates unstable references for the imperative handle and is inconsistent with the other animated icon components in this PR.

Suggested fix

+import { forwardRef, useImperativeHandle, useCallback } from "react";
-import { forwardRef, useImperativeHandle } from "react";
 import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
 import { motion, useAnimate } from "motion/react";

Then wrap the functions:

-    const start = async () => {
+    const start = useCallback(async () => {
       animate(
         ".card-body",
         // ... animation config
       );
       // ... rest of animation
-    };
+    }, [animate]);

-    const stop = () => {
+    const stop = useCallback(() => {
       animate(".card-body", { rotate: 0, scale: 1 }, { duration: 0.2 });
       // ... rest
-    };
+    }, [animate]);

---

61-67: Remove unused handler functions.

handleHoverStart and handleHoverEnd are defined but never used—the JSX directly references start and stop on lines 72-73. Remove this dead code.

Suggested fix

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (

Configuration used: defaults

Review profile: CHILL

Plan: Pro

components/ui/credit-card.tsx (1)

67-73: Remove unused handler functions.

handleHoverStart and handleHoverEnd are defined but never used—Lines 78-79 pass start and stop directly to onHoverStart/onHoverEnd.

🧹 Proposed cleanup

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (

components/ui/message-circle-icon.tsx (1)

48-54: Remove unused handler functions.

Same as in credit-card.tsx: handleHoverStart and handleHoverEnd are defined but never called—Lines 59-60 pass start and stop directly.

🧹 Proposed cleanup

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (

components/examples/profile-dropdown.tsx (2)

6-6: Import inconsistency: use motion/react for consistency.

Other icon components in this PR import from motion/react, but this file uses framer-motion. For consistency across the codebase, consider using the same import path.

♻️ Suggested change

-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence } from "motion/react";

---

139-145: Consider using a more stable key.

Using item.label as a key works if labels are unique, but adding an explicit id field to items would be more robust against future label changes or duplicates.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

components/examples/profile-dropdown.tsx (3)

115-128: Consider adding aria-haspopup for better accessibility.

The button has good accessibility attributes (aria-label, aria-expanded), but adding aria-haspopup="menu" would improve screen reader experience by indicating this button opens a menu.

♿ Suggested improvement

       <button
         onClick={() => setIsOpen((prev) => !prev)}
         aria-label="Toggle profile menu"
         aria-expanded={isOpen}
+        aria-haspopup="menu"
         className="hover:ring-accent flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-all hover:ring-2"
       >

---

103-111: Consider attaching outside click listener only when dropdown is open.

The current implementation always listens for mousedown events even when the dropdown is closed. For a single dropdown this is negligible, but you could optimize by conditionally attaching the listener.

♻️ Optional optimization

   useEffect(() => {
+    if (!isOpen) return;
+
     const handler = (e: MouseEvent) => {
       if (!dropdownRef.current?.contains(e.target as Node)) {
         setIsOpen(false);
       }
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
-  }, []);
+  }, [isOpen]);

---

132-146: Consider adding role="menu" for accessibility compliance.

For screen readers to properly announce this as a menu, the dropdown container should have role="menu". This pairs with the aria-haspopup="menu" suggestion on the button.

♿ Suggested improvement

           <motion.div
             initial={{ opacity: 0, y: -10, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: -10, scale: 0.95 }}
             transition={{ duration: 0.2 }}
+            role="menu"
             className="border-border bg-background absolute right-0 z-50 mt-2 min-w-[220px] overflow-hidden rounded-xl border shadow-lg"
           >

Configuration used: defaults

Review profile: CHILL

Plan: Pro