اطلاعات پروفایل (Profile Info)

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

export default function MyComponent() {
  return (
    <ProfileInfo
      name="محسن یگانه"
      username="mohsene"
      avatarSrc="https://example.com/avatar.jpg"
      infoText="۴:۲۱ ص"
      infoIcon={<ClockIcon />}
      onActionClick={() => console.log('Action clicked')}
      onProfileClick={() => console.log('Profile clicked')}
    />
  );
}

<ProfileInfo
  size="sm"
  name="احمد رضایی"
  username="ahmad.rezaei"
  avatarSrc="/avatar.jpg"
  infoText="آنلاین"
/>

<ProfileInfo
  size="md"
  name="فاطمه کریمی"
  username="fateme_karimi"
  avatarSrc="/avatar.jpg"
  infoText="۲ ساعت پیش"
/>

<ProfileInfo
  size="lg"
  name="علی محمدی"
  username="ali.m"
  avatarSrc="/avatar.jpg"
  infoText="دیروز"
/>

<ProfileInfo
  variant="default"
  name="سارا احمدی"
  username="sara_ahmadi"
  infoText="آنلاین"
/>

<ProfileInfo
  variant="dark"
  name="حسین رضایی"
  username="hosein.r"
  infoText="۱۰ دقیقه پیش"
/>

<ProfileInfo
  variant="transparent"
  name="مریم جعفری"
  username="maryam_jafari"
  infoText="غیرفعال"
/>

const [selected, setSelected] = React.useState<string | null>(null);

<ProfileInfo
  name="رضا کریمی"
  username="reza.karimi"
  avatarSrc="/avatar.jpg"
  infoText="آنلاین"
  onProfileClick={() => setSelected('reza')}
  onActionClick={() => console.log('Menu opened')}
  className={selected === 'reza' ? 'ring-2 ring-primary' : ''}
/>

<ProfileInfo
  name="کاربر جدید"
  username="new_user"
  initials="ک ج"
  infoText="تازه عضو شده"
/>

const users = [
  {
    name: 'محسن یگانه',
    username: 'mohsene',
    avatarSrc: '/avatars/mohsen.jpg',
    status: 'آنلاین',
  },
  {
    name: 'علی احمدی',
    username: 'ali.a',
    avatarSrc: '/avatars/ali.jpg',
    status: '۲ ساعت پیش',
  },
  // ...
];

<div className="space-y-2" dir="rtl">
  {users.map((user) => (
    <ProfileInfo
      key={user.username}
      name={user.name}
      username={user.username}
      avatarSrc={user.avatarSrc}
      infoText={user.status}
      avatarBorderVariant="gold"
      onProfileClick={() => navigate(`/profile/${user.username}`)}
      onActionClick={() => openUserMenu(user)}
    />
  ))}
</div>

import { ProfileInfo } from '@parto-system-design/ui';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@parto-system-design/ui';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <div>
      <ProfileInfo
        name="محسن یگانه"
        username="mohsene"
        avatarSrc="/avatar.jpg"
        infoText="۴:۲۱ ص"
        infoIcon={<ClockIcon />}
      />
    </div>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <div dir="rtl">
      <DropdownMenuItem>مشاهده پروفایل</DropdownMenuItem>
      <DropdownMenuItem>ارسال پیام</DropdownMenuItem>
      <DropdownMenuItem>بلاک کردن</DropdownMenuItem>
    </div>
  </DropdownMenuContent>
</DropdownMenu>

<Sidebar>
  <SidebarHeader>
    <ProfileInfo
      size="sm"
      variant="transparent"
      name="محسن یگانه"
      username="mohsene"
      avatarSrc="/avatar.jpg"
      infoText="آنلاین"
      avatarBorderVariant="primary"
      onProfileClick={() => navigate('/profile')}
      onActionClick={() => openSettings()}
    />
  </SidebarHeader>
  {/* ... */}
</Sidebar>

<Dialog>
  <DialogContent>
    <div dir="rtl">
      <ProfileInfo
        size="lg"
        variant="transparent"
        name="محسن یگانه"
        username="mohsene"
        avatarSrc="/avatar.jpg"
        infoText="عضو از ۱۴۰۲"
        avatarBorderVariant="gold"
      />
      <div className="mt-4 space-y-2">
        <p>ایمیل: mohsen@example.com</p>
        <p>شماره تلفن: ۰۹۱۲۳۴۵۶۷۸۹</p>
      </div>
    </div>
  </DialogContent>
</Dialog>

<div dir="ltr">
  <ProfileInfo
    name="Mohsen Yeganeh"
    username="mohsene"
    avatarSrc="/avatar.jpg"
    infoText="4:21 AM"
  />
</div>

<ProfileInfo
  name="محسن یگانه"
  username="mohsene"
  aria-label="پروفایل محسن یگانه"
  // ...
/>