کارت پروفایل (Profile Card)

import { ProfileCard } from '@parto-system-design/ui';
import { Users } from 'lucide-react';

export default function MyComponent() {
  return (
    <ProfileCard
      name="محسن یگانه"
      username="mohsene"
      avatarSrc="https://example.com/avatar.jpg"
      followers={125000}
      followersIcon={<Users className="h-3.5 w-3.5" />}
      onCardClick={() => console.log('Card clicked')}
    />
  );
}

<ProfileCard
  size="sm"
  name="احمد رضایی"
  username="ahmad.rezaei"
  avatarSrc="/avatar.jpg"
  followers={5400}
  followersIcon={<Users className="h-3 w-3" />}
/>

<ProfileCard
  size="md"
  name="فاطمه کریمی"
  username="fateme_karimi"
  avatarSrc="/avatar.jpg"
  followers={82000}
  followersIcon={<Users className="h-3.5 w-3.5" />}
/>

<ProfileCard
  size="lg"
  name="علی محمدی"
  username="ali.m"
  avatarSrc="/avatar.jpg"
  followers={1200000}
  followersIcon={<Users className="h-4 w-4" />}
/>

<ProfileCard
  variant="default"
  name="سارا احمدی"
  username="sara_ahmadi"
  followers={45000}
  followersIcon={<Users className="h-3.5 w-3.5" />}
/>

<ProfileCard
  variant="dark"
  name="حسین رضایی"
  username="hosein.r"
  followers={98000}
  followersIcon={<Users className="h-3.5 w-3.5" />}
/>

<ProfileCard
  variant="transparent"
  name="مریم جعفری"
  username="maryam_jafari"
  followers={23500}
  followersIcon={<Users className="h-3.5 w-3.5" />}
/>

const users = [
  {
    name: 'محسن یگانه',
    username: 'mohsene',
    avatarSrc: '/avatar1.jpg',
    followers: 125000,
  },
  // ...
];

<div className="grid grid-cols-2 md:grid-cols-4 gap-4" dir="rtl">
  {users.map((user) => (
    <ProfileCard
      key={user.username}
      name={user.name}
      username={user.username}
      avatarSrc={user.avatarSrc}
      followers={user.followers}
      followersIcon={<Users className="h-3.5 w-3.5" />}
      onCardClick={() => console.log(`${user.name} clicked`)}
    />
  ))}
</div>

<ProfileCard
  name="کاربر جدید"
  username="new_user"
  initials="ک ج"
  avatarBorderVariant="primary"
/>

import { ProfileCard } from '@parto-system-design/ui';
import { Users } from 'lucide-react';

const suggestedUsers = [
  {
    id: '1',
    name: 'محسن یگانه',
    username: 'mohsene',
    avatarSrc: '/avatars/mohsen.jpg',
    followers: 125000,
  },
  {
    id: '2',
    name: 'علی احمدی',
    username: 'ali.a',
    avatarSrc: '/avatars/ali.jpg',
    followers: 82000,
  },
  // ...
];

export default function SuggestedUsers() {
  return (
    <div className="space-y-4" dir="rtl">
      <h2 className="text-lg font-semibold">پیشنهاد دنبال کردن</h2>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        {suggestedUsers.map((user) => (
          <ProfileCard
            key={user.id}
            name={user.name}
            username={user.username}
            avatarSrc={user.avatarSrc}
            followers={user.followers}
            followersIcon={<Users className="h-3.5 w-3.5" />}
            avatarBorderVariant="gold"
            onCardClick={() => navigateToProfile(user.username)}
          />
        ))}
      </div>
    </div>
  );
}

import { ProfileCard } from '@parto-system-design/ui';
import { Users } from 'lucide-react';
import { useState } from 'react';

export default function UserSearch() {
  const [searchResults, setSearchResults] = useState([]);

  return (
    <div className="space-y-4" dir="rtl">
      <Input
        placeholder="جستجوی کاربران..."
        onChange={(e) => handleSearch(e.target.value)}
      />
      <div className="grid grid-cols-3 gap-4">
        {searchResults.map((user) => (
          <ProfileCard
            key={user.id}
            name={user.name}
            username={user.username}
            avatarSrc={user.avatarSrc}
            followers={user.followers}
            followersIcon={<Users className="h-3.5 w-3.5" />}
            onCardClick={() => viewProfile(user)}
          />
        ))}
      </div>
    </div>
  );
}

import { ProfileCard, Button } from '@parto-system-design/ui';
import { Users, UserPlus } from 'lucide-react';

export default function ProfileWithFollow() {
  const [isFollowing, setIsFollowing] = useState(false);

  return (
    <div className="relative" dir="rtl">
      <ProfileCard
        name="محسن یگانه"
        username="mohsene"
        avatarSrc="/avatar.jpg"
        followers={125000}
        followersIcon={<Users className="h-3.5 w-3.5" />}
      />
      <div className="absolute top-2 left-2">
        <Button
          size="sm"
          variant={isFollowing ? "outline" : "primary"}
          onClick={() => setIsFollowing(!isFollowing)}
        >
          {isFollowing ? 'دنبال‌شده' : 'دنبال کردن'}
        </Button>
      </div>
    </div>
  );
}

import { ProfileCard, Carousel, CarouselContent, CarouselItem } from '@parto-system-design/ui';
import { Users } from 'lucide-react';

export default function ProfileCarousel() {
  const users = [...]; // لیست کاربران

  return (
    <Carousel dir="rtl" className="w-full">
      <CarouselContent>
        {users.map((user) => (
          <CarouselItem key={user.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
            <ProfileCard
              name={user.name}
              username={user.username}
              avatarSrc={user.avatarSrc}
              followers={user.followers}
              followersIcon={<Users className="h-3.5 w-3.5" />}
              avatarBorderVariant="gold"
            />
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}

<div dir="ltr">
  <ProfileCard
    name="Mohsen Yeganeh"
    username="mohsene"
    avatarSrc="/avatar.jpg"
    followers={125000}
    followersIcon={<Users className="h-3.5 w-3.5" />}
  />
</div>

<ProfileCard
  name="محسن یگانه"
  username="mohsene"
  aria-label="کارت پروفایل محسن یگانه با ۱۲۵ هزار فالوور"
  // ...
/>

// استفاده از ProfileCard - عمودی
<div className="grid grid-cols-4 gap-4">
  <ProfileCard name="..." username="..." />
</div>

// استفاده از ProfileInfo - افقی
<div className="space-y-2">
  <ProfileInfo name="..." username="..." />
</div>