From 1a219bf3f78658bdd4cbc64bf8bff1e188a1bbc9 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 18 Jan 2025 17:59:12 +0530
Subject: [PATCH] add i18n

---
 src/components/ui/multi-select.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
index 645a40e74ff..4871bfb8fcb 100644
--- a/src/components/ui/multi-select.tsx
+++ b/src/components/ui/multi-select.tsx
@@ -1,5 +1,6 @@
-import { XCircle, XIcon } from "lucide-react";
+import { ChevronDown, XCircle, XIcon } from "lucide-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
 
@@ -61,6 +62,8 @@ export const MultiSelect = React.forwardRef<
       setSelectedValues(defaultValue);
     }, [defaultValue]);
 
+    const { t } = useTranslation();
+
     const toggleOption = (option: string) => {
       const newSelectedValues = selectedValues.includes(option)
         ? selectedValues.filter((value) => value !== option)
@@ -141,20 +144,18 @@ export const MultiSelect = React.forwardRef<
                         handleClear();
                       }}
                     />
-                    <CareIcon
+                    <ChevronDown
                       id="dropdown-toggle"
-                      icon="l-angle-down"
-                      className="text-black text-3xl"
+                      className="h-4 mx-2 cursor-pointer text-black"
                     />
                   </div>
                 </div>
               ) : (
                 <div className="flex items-center justify-between w-full mx-auto">
                   <span className="text-sm text-black mx-3">{placeholder}</span>
-                  <CareIcon
+                  <ChevronDown
                     id="dropdown-toggle"
-                    icon="l-angle-down"
-                    className="text-black"
+                    className="h-4 mx-2 cursor-pointer text-black"
                   />
                 </div>
               )}
@@ -209,7 +210,7 @@ export const MultiSelect = React.forwardRef<
                           onSelect={handleClear}
                           className="flex-1 justify-center cursor-pointer"
                         >
-                          Clear
+                          {t("clear")}
                         </CommandItem>
                         <Separator
                           orientation="vertical"
@@ -221,7 +222,7 @@ export const MultiSelect = React.forwardRef<
                       onSelect={() => setIsPopoverOpen(false)}
                       className="flex-1 justify-center cursor-pointer max-w-full"
                     >
-                      Close
+                      {t("close")}
                     </CommandItem>
                   </div>
                 </CommandGroup>