edit combo box dynamic items

src/components/common/combo-box.tsx

@@ -1,33 +1,27 @@
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
 import { ArrowDown2 } from 'iconsax-react'
 import { FC, useState } from 'react'
-
-const value = [
-    { id: 1, name: 'تهران' },
-    { id: 2, name: 'شیراز' },
-    { id: 3, name: 'اصفهان' },
-    { id: 4, name: 'اراک' },
-    { id: 5, name: 'تبریز' },
-]
+import { ComboBoxItems } from '../../types'
 
 type Props = {
     field?: any
     placeholder?: string
-    className?: string
+    className?: string,
+    data?: ComboBoxItems[] | []
 }
 
-export const ComboBox: FC<Props> = ({ field, placeholder, className }) => {
+export const ComboBox: FC<Props> = ({ field, placeholder, className, data = [] }) => {
     const [query, setQuery] = useState('')
 
     const filteredValue =
         query === ''
-            ? value
-            : value?.filter((value) => {
+            ? data
+            : data?.filter((value) => {
                 return value.name.toLowerCase().includes(query.toLowerCase())
             })
 
     return (
-        <Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')}>
+        <Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')} disabled={data?.length <= 0}>
             <div className="relative w-full">
                 <ComboboxInput
                     placeholder={placeholder}
@@ -42,8 +36,7 @@ export const ComboBox: FC<Props> = ({ field, placeholder, className }) => {
                     <ArrowDown2 className="size-5 absolute left-5 top-5 p-0 text-secondary-text-color/70" />
                 </ComboboxButton>
             </div>
-
-            <ComboboxOptions
+            {data?.length > 0 && <ComboboxOptions
                 anchor="bottom start"
                 transition
                 className="bg-white shadow min-w-[220px] mt-2 rounded-xl p-2"
@@ -57,7 +50,7 @@ export const ComboBox: FC<Props> = ({ field, placeholder, className }) => {
                         <div className="text-sm/6 text-black">{value?.name}</div>
                     </ComboboxOption>
                 ))}
-            </ComboboxOptions>
+            </ComboboxOptions>}
         </Combobox>
     )
 }

src/types/index.ts

@@ -276,3 +276,8 @@ export interface ScoreResponse {
     score: number,
     total: number
 }
+
+export interface ComboBoxItems {
+    name: string,
+    id: string | number
+}