icon delivery color

src/app/globals.css

@@ -386,3 +386,13 @@ html[data-theme="dark"] {
 .game-explanation {
   display: none;
 }
+
+.icon-delivery {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background-color: var(--primary);
+  -webkit-mask: url("/assets/images/fast-delivery.svg") no-repeat center / contain;
+  mask: url("/assets/images/fast-delivery.svg") no-repeat center / contain;
+}

src/components/combobox/Combobox.tsx

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import React, { useState, useEffect, useRef } from 'react';
+import clsx from "clsx";
-import { motion, Variants } from 'framer-motion';
+import { motion, Variants } from "framer-motion";
-import { Icon, SearchNormal } from 'iconsax-react';
+import { Icon, SearchNormal } from "iconsax-react";
-import clsx from 'clsx';
+import { ChevronDown } from "lucide-react";
-import { ChevronDown } from 'lucide-react';
+import Image from "next/image";
-import Image from 'next/image';
+import React, { useEffect, useRef, useState } from "react";
 
 export interface ComboboxOption {
   id: string;
@@ -23,12 +23,25 @@ type Props = {
   searchable?: boolean;
   placeholder?: string;
   icon?: React.ElementType;
-    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
+  onSelectionChange: (
-} & React.HTMLAttributes<HTMLDivElement>
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    index: number,
+  ) => void;
+} & React.HTMLAttributes<HTMLDivElement>;
 
-function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedId, searchable = true, onSelectionChange, ...props }: Props) {
+function Combobox({
+  title,
+  options,
+  placeholder,
+  icon: Icon,
+  expanded,
+  selectedId,
+  searchable = true,
+  onSelectionChange,
+  ...props
+}: Props) {
   const [expand, setExpand] = useState(expanded);
-    const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState("");
   const boxRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -39,34 +52,39 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
     };
 
     if (expand) {
-            document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside);
     }
 
     return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [expand]);
 
   const toggleExpand = () => {
     setExpand((prev) => !prev);
-        setSearchValue('');
+    setSearchValue("");
   };
 
   const searchChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
   };
 
-    const setSelection = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+  const setSelection = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    index: number,
+  ) => {
     e.stopPropagation(); // prevent toggle
     onSelectionChange(e, index);
     setExpand(false);
   };
 
   const selectedOption = options.find((x) => x.id === selectedId);
-    const activeIcon = selectedOption?.icon && React.createElement(selectedOption.icon, {
+  const activeIcon =
+    selectedOption?.icon &&
+    React.createElement(selectedOption.icon, {
       size: 16,
       color: "currentColor",
-        className: "inline-block mr-1 text-primary dark:text-foreground"
+      className: "inline-block mr-1 text-primary dark:text-foreground",
     });
   const activeImage = selectedOption?.imagePath && (
     <Image
@@ -79,34 +97,31 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
     />
   );
 
-
   const variants: Variants = {
     collapse: {
       opacity: 0,
       scale: 0.95,
-            pointerEvents: 'none',     // disable clicks
+      pointerEvents: "none", // disable clicks
       transition: {
         duration: 0.1,
-                ease: 'easeInOut'
+        ease: "easeInOut",
-            }
+      },
     },
     expand: {
       opacity: 1,
       scale: 1,
-            pointerEvents: 'auto',     // re-enable clicks
+      pointerEvents: "auto", // re-enable clicks
       transition: {
         duration: 0.1,
-                ease: 'easeInOut'
+        ease: "easeInOut",
-            }
+      },
-        }
+    },
   };
 
-
   return (
-        <div ref={boxRef}
+    <div
-            className={clsx(
+      ref={boxRef}
-                "relative",
+      className={clsx("relative", props.className ?? "")}
-                props.className ?? '')}
       {...props}
     >
       <div
@@ -114,7 +129,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
         tabIndex={0}
         onClick={toggleExpand}
         role="combobox"
-                aria-controls=''
+        aria-controls=""
         aria-expanded={expand}
         aria-haspopup="listbox"
         aria-label={title}
@@ -129,24 +144,31 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
         </label>
 
         <div className="w-full text-sm2 flex items-center justify-start gap-3">
-                    {
+          {activeImage
-                        activeImage ? (
+            ? activeImage
-                            activeImage
+            : activeIcon
-                        ) : activeIcon ? (
+              ? activeIcon
-                            activeIcon
+              : Icon && (
-                        ) : (
+                  <Icon
-                            Icon && <Icon size={16} color="currentColor" className="inline-block mr-1 text-primary dark:text-foreground" />
+                    size={16}
-                        )
+                    color="currentColor"
-                    }
+                    className="inline-block mr-1 text-primary dark:text-foreground"
-                    <span className={clsx(
+                  />
-                        selectedOption?.title ? "mt-0.5" : "mt-1 text-sm font-light"
+                )}
+          <span
+            className={clsx(
+              selectedOption?.title ? "mt-0.5" : "mt-1 text-sm font-light",
             )}
           >
             {selectedOption?.title ?? placeholder}
           </span>
         </div>
 
-                <ChevronDown size={20} data-expand={expand} className="transition-all stroke-foreground duration-200 data-[expand=true]:rotate-x-180" />
+        <ChevronDown
+          size={20}
+          data-expand={expand}
+          className="transition-all stroke-foreground duration-200 data-[expand=true]:rotate-x-180"
+        />
       </div>
 
       <motion.div
@@ -160,10 +182,9 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
         animate={expand ? "expand" : "collapse"}
         variants={variants}
       >
-
+        {searchable && (
-                {searchable &&
           <div className="w-full flex gap-2 border-b border-border px-3 items-center">
-                        <SearchNormal size={16} className='stroke-gray-400' />
+            <SearchNormal size={16} className="stroke-gray-400" />
             <input
               placeholder="جستجو ..."
               className="w-full outline-none text-sm2 pb-2 pt-3"
@@ -171,8 +192,8 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
               value={searchValue}
             />
           </div>
-                }
+        )}
-                <div className='p-1'>
+        <div className="p-1">
           {options
             .filter((v) => v.title?.includes(searchValue))
             .map((v, i) => (
@@ -185,23 +206,23 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
                 role="option"
                 aria-selected
               >
-                                {
+                {v?.imagePath ? (
-                                    v?.imagePath ? (
+                  <span
-                                        <Image
+                    className="icon-delivery mr-1"
-                                            src={v.imagePath}
+                    aria-hidden
-                                            alt=""
-                                            width={16}
-                                            height={16}
-                                            unoptimized
-                                            className="inline-block mr-1 dark:brightness-0 dark:invert"
                   />
-                                    ) : v?.icon && React.createElement(v.icon, {
+                ) : (
+                  v?.icon &&
+                  React.createElement(v.icon, {
                     size: 16,
                     color: "currentColor",
-                                        className: "inline-block mr-1 text-primary dark:text-foreground"
+                    className:
+                      "inline-block mr-1 text-primary dark:text-foreground",
                   })
-                                }
+                )}
-                                <span className="text-sm2 tracking-[0.13px] leading-5 w-full mt-1">{v.title}</span>
+                <span className="text-sm2 tracking-[0.13px] leading-5 w-full mt-1">
+                  {v.title}
+                </span>
               </div>
             ))}
         </div>
@@ -210,5 +231,4 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
   );
 }
 
-
+export default Combobox;
-export default Combobox