add indicator chevron component

Author: kantord

src/components/ui/chevron-indicator.tsx

@@ -0,0 +1,16 @@
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ChevronIndicatorProps {
+  isOpen: boolean;
+  className?: string;
+}
+
+export function ChevronIndicator({ isOpen, className }: ChevronIndicatorProps) {
+  const iconClassName = cn("size-4", className);
+  return isOpen ? (
+    <ChevronUp className={iconClassName} />
+  ) : (
+    <ChevronDown className={iconClassName} />
+  );
+}

src/components/user-menu/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { ChevronDown, ChevronUp } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
+import { ChevronIndicator } from "@/components/ui/chevron-indicator";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,7 +24,7 @@ export function UserMenu({ userName }: UserMenuProps) {
         <Button variant="ghost" className="flex items-center gap-2">
           <UserAvatar userName={userName} />
           <span>{userName}</span>
-          {isOpen ? <ChevronUp /> : <ChevronDown />}
+          <ChevronIndicator isOpen={isOpen} />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>