feat: remove ChevronIcon in navbar; add icon prop to Button component

app/components/icons/chevron.tsx

@@ -1,25 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-/**
- * Note: `ChevronIcon` default mengarah ke bawah.
- * Gunakan class `rotate-xx` untuk mengubah arah ikon.
- */
-export const ChevronIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={21}
-      height={21}
-      viewBox="0 0 21 21"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={properties.className}
-      {...properties}
-    >
-      <path
-        d="M10.197 13.623l5.008-5.008-1.177-1.18-3.83 3.834-3.831-3.833-1.178 1.178 5.008 5.009z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/ui/button.tsx

@@ -44,6 +44,7 @@ type ButtonBaseProperties = {
   size?: VariantProps<typeof buttonVariants>['size']
   className?: string
   isLoading?: boolean
+  icon?: ReactNode
 }
 
 type PolymorphicReference<C extends ElementType> =
@@ -64,6 +65,7 @@ export const Button = <C extends ElementType = 'button'>(
     size,
     className,
     isLoading = false,
+    icon,
     ...restProperties
   } = properties
   const Component = as || HeadlessButton
@@ -74,7 +76,7 @@ export const Button = <C extends ElementType = 'button'>(
       className={classes}
       {...restProperties}
     >
-      {isLoading && <ArrowPathIcon className="animate-spin" />}
+      {isLoading ? <ArrowPathIcon className="size-5 animate-spin" /> : icon}
       {children}
     </Component>
   )

app/layouts/admin/navbar.tsx

@@ -3,9 +3,9 @@ import {
   ArrowRightStartOnRectangleIcon,
   UserIcon,
 } from '@heroicons/react/24/outline'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
-import { ChevronIcon } from '~/components/icons/chevron'
 import { ProfileIcon } from '~/components/icons/profile'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
@@ -46,7 +46,7 @@ export const Navbar = () => {
 
               <span className="text-sm">{staffData?.name}</span>
             </div>
-            <ChevronIcon className="opacity-50" />
+            <ChevronDownIcon className="size-4 opacity-50" />
           </PopoverButton>
           <PopoverPanel
             anchor={{ to: 'bottom', gap: '8px' }}
@@ -77,8 +77,8 @@ export const Navbar = () => {
                   type="submit"
                   className="w-full justify-start rounded p-1 px-3 text-lg font-semibold"
                   variant="secondary"
+                  icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
                 >
-                  <ArrowRightStartOnRectangleIcon className="size-5" />
                   <span>Logout</span>
                 </Button>
               </fetcher.Form>