اتوکامپلیت کاربران

interface UserItem {
  id: string;          // شناسه یکتا
  name: string;        // نام کاربر
  username: string;    // نام کاربری
  avatar?: string;     // آدرس تصویر پروفایل
  followers: number;   // تعداد فالوورها
  [key: string]: any;  // فیلدهای اضافی
}

import { UserAutocomplete, UserItem } from "@parto-system-design/ui";
import { useState } from "react";

export function UserSearch() {
  const [value, setValue] = useState("");
  const [users, setUsers] = useState<UserItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const handleSearch = async (query: string, pageNum: number) => {
    if (pageNum === 1) {
      setIsLoading(true);
      setUsers([]);
      setPage(1);
    } else {
      setIsLoadingMore(true);
    }

    try {
      const response = await fetch(
        `/api/users/search?q=${query}&page=${pageNum}&pageSize=10`
      );
      const data = await response.json();

      if (pageNum === 1) {
        setUsers(data.users);
      } else {
        setUsers((prev) => [...prev, ...data.users]);
      }

      setHasMore(data.hasMore);
      setPage(pageNum);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
      setIsLoadingMore(false);
    }
  };

  const handleLoadMore = async () => {
    await handleSearch(value, page + 1);
  };

  return (
    <UserAutocomplete
      value={value}
      onValueChange={setValue}
      users={users}
      isLoading={isLoading}
      isLoadingMore={isLoadingMore}
      hasMore={hasMore}
      onSearch={handleSearch}
      onLoadMore={handleLoadMore}
      placeholder="جستجوی کاربر..."
      dir="rtl"
      enableInfiniteScroll={true}
      onSelect={(user) => {
        console.log("Selected user:", user);
      }}
    />
  );
}

import { UserAutocomplete } from "@parto-system-design/ui";
import { useState } from "react";

const mockUsers = [
  {
    id: "1",
    name: "محسن یگانه",
    username: "mohsene",
    followers: 7864554,
    avatar: "/avatars/mohsen.jpg",
  },
  {
    id: "2",
    name: "علی کریمی",
    username: "alikarimi8",
    followers: 4605123,
    avatar: "/avatars/ali.jpg",
  },
];

export function SimpleUserSearch() {
  const [value, setValue] = useState("");

  return (
    <UserAutocomplete
      value={value}
      onValueChange={setValue}
      users={mockUsers}
      placeholder="جستجوی کاربر..."
      minChars={0}
      dir="rtl"
      enableInfiniteScroll={false}
    />
  );
}

import { UserAutocomplete } from "@parto-system-design/ui";
import { useState } from "react";

export function FilterUsers() {
  const [value, setValue] = useState("");
  const [filteredUsers, setFilteredUsers] = useState([]);

  const allUsers = [
    // ... لیست کاربران
  ];

  const handleSearch = (query: string) => {
    const filtered = allUsers.filter(
      (user) =>
        user.name.includes(query) || user.username.includes(query)
    );
    setFilteredUsers(filtered);
  };

  return (
    <UserAutocomplete
      value={value}
      onValueChange={setValue}
      users={filteredUsers}
      onSearch={handleSearch}
      placeholder="جستجوی کاربر..."
      dir="rtl"
      enableInfiniteScroll={false}
    />
  );
}

import { UserAutocomplete, UserItem } from "@parto-system-design/ui";
import { useState } from "react";

export function MultiUserSelect() {
  const [value, setValue] = useState("");
  const [selectedUsers, setSelectedUsers] = useState<UserItem[]>([]);

  return (
    <div className="space-y-4" dir="rtl">
      <UserAutocomplete
        value={value}
        onValueChange={setValue}
        // ... other props
        clearOnSelect={true}
        onSelect={(user) => {
          setSelectedUsers((prev) => [...prev, user]);
        }}
      />

      {/* نمایش کاربران انتخاب شده */}
      <div className="flex flex-wrap gap-2">
        {selectedUsers.map((user) => (
          <div
            key={user.id}
            className="flex items-center gap-2 bg-accent px-3 py-1 rounded-full"
          >
            <img
              src={user.avatar}
              className="w-6 h-6 rounded-full"
            />
            <span className="text-sm">{user.name}</span>
            <button
              onClick={() =>
                setSelectedUsers((prev) =>
                  prev.filter((u) => u.id !== user.id)
                )
              }
            >
              ×
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

const handleLoadMore = async () => {
  const nextPage = page + 1;
  const response = await fetch(`/api/users?page=${nextPage}`);
  const data = await response.json();
  
  // اضافه کردن کاربران جدید
  setUsers((prev) => [...prev, ...data.users]);
  setPage(nextPage);
  setHasMore(data.hasMore);
};