اتوکامپلیت

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

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);
  }}
/>