اتوکامپلیت

import { Autocomplete } from '@parto-system-design/ui'

interface AutocompleteItem {
  value: string // مقدار یکتا
  label: string // برچسب نمایشی
  [key: string]: unknown // فیلدهای اضافی دلخواه
}

import { Autocomplete } from '@parto-system-design/ui'
import { useState } from 'react'

export function UserSearch() {
  const [value, setValue] = useState('')
  const [suggestions, setSuggestions] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  const handleSearch = async (query: string) => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/users/search?q=${query}`)
      const data = await response.json()
      setSuggestions(data.users)
    } catch (error) {
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Autocomplete
      value={value}
      onValueChange={setValue}
      suggestions={suggestions}
      isLoading={isLoading}
      onSearch={handleSearch}
      placeholder="جستجوی کاربر..."
      minChars={2}
      dir="rtl"
      renderItem={(item) => (
        <div className="flex items-center gap-3">
          <img src={item.avatar} className="w-10 h-10 rounded-full" />
          <div>
            <div className="font-medium">{item.name}</div>
            <div className="text-sm text-muted-foreground">@{item.username}</div>
          </div>
        </div>
      )}
      onSelect={(user) => {
        console.log('Selected user:', user)
      }}
    />
  )
}

import { Autocomplete } from '@parto-system-design/ui'

const countries = [
  { value: 'ir', label: 'ایران', icon: '🇮🇷' },
  { value: 'us', label: 'آمریکا', icon: '🇺🇸' },
  { value: 'uk', label: 'انگلستان', icon: '🇬🇧' },
]

export function CountrySelect() {
  const [value, setValue] = useState('')
  const [suggestions, setSuggestions] = useState(countries)

  return (
    <Autocomplete
      value={value}
      onValueChange={setValue}
      suggestions={suggestions}
      onSearch={(query) => {
        setSuggestions(countries.filter((c) => c.label.includes(query)))
      }}
      placeholder="انتخاب کشور..."
      renderItem={(item) => (
        <div className="flex items-center gap-2">
          <span className="text-2xl">{item.icon}</span>
          <span>{item.label}</span>
        </div>
      )}
    />
  )
}

import { Autocomplete, Button, Label } from '@parto-system-design/ui'
import { useState } from 'react'

export function UserForm() {
  const [selectedUser, setSelectedUser] = useState('')

  return (
    <form className="space-y-4" dir="rtl">
      <div className="space-y-2">
        <Label>انتخاب کاربر</Label>
        <Autocomplete
          value={selectedUser}
          onValueChange={setSelectedUser}
          // ... props
        />
      </div>
      <Button type="submit">ارسال</Button>
    </form>
  )
}

<Autocomplete
  clearOnSelect={true}
  onSelect={(item) => {
    // Add to recipients list
    addRecipient(item)
  }}
/>