style: add brands button motion

src/components/dashboards/BrandFilter.tsx

@@ -3,6 +3,8 @@
 import { cn } from "@/lib/utils";
 import { useBrandFilter } from "@/src/hooks/useBrandFilter";
 import { Button } from "../ui/button";
+import { ChevronRight } from "lucide-react";
+import { motion } from "framer-motion";
 
 export function BrandFilter() {
   const {
@@ -25,7 +27,13 @@ export function BrandFilter() {
   }
 
   return (
-    <div className="flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: "circOut" }}
+      className="flex items-center justify-center"
+    >
+      <div className="flex flex-wrap gap-2">
         <button
           onClick={() => handleSelect(null)}
           className={cn(
@@ -63,11 +71,15 @@ export function BrandFilter() {
             <button
               onClick={() => setIsExpanded(true)}
               className={cn(
-              "rounded-lg border border-dashed px-4 py-2 text-sm font-medium hover:bg-accent transition-all cursor-pointer",
-              "flex-1 min-w-25 sm:flex-none animate-in fade-in slide-in-from-bottom-2",
+                "rounded-lg pl-2 text-sm font-medium transition-all cursor-pointer",
+                "flex-1 sm:flex-none animate-in fade-in slide-in-from-left-2",
               )}
             >
-            {validBrands.length - 3} Lainnya
+              <div className="flex items-center justify-center gap-1 hover:text-primary">
+                {validBrands.length - 3}
+                <span>Lainnya</span>
+                <ChevronRight className="w-4 h-4" />
+              </div>
             </button>
           )}
 
@@ -85,5 +97,6 @@ export function BrandFilter() {
           )}
         </div>
       </div>
+    </motion.div>
   );
 }