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

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

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