From 4bd23011ff419fb5e565f5305bb666e25483dac4 Mon Sep 17 00:00:00 2001
From: Teddir <ferryaja20000@gmail.com>
Date: Thu, 25 Jul 2024 07:08:37 +0700
Subject: [PATCH] display ChevronUp icon when openSelect is true

---
 components/layout/search/filter/dropdown.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
index 31daa25ce..3e4a1aab7 100644
--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { SVGProps, useEffect, useRef, useState } from 'react';
 
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import type { ListItem } from '.';
 import { FilterItem } from './item';
 
@@ -36,6 +36,9 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
     });
   }, [pathname, list, searchParams]);
 
+  const ChevronUpDownIcon = (props: SVGProps<SVGSVGElement>) =>
+    openSelect ? <ChevronUpIcon {...props} /> : <ChevronDownIcon {...props} />;
+
   return (
     <div className="relative" ref={ref}>
       <div
@@ -45,7 +48,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
-        <ChevronDownIcon className="h-4" />
+        <ChevronUpDownIcon className="h-4" />
       </div>
       {openSelect && (
         <div