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>
   )