آواتار
avatarکامپوننتتصویر دایرهای کاربر که اگر تصویر نباشه، حرف اول اسم را با حلقهی سفید نشان میده.
ا
+۲ نفر دیگرنصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add avatarنصب دستی
محتوای تب «کد» را در
components/ui/avatar.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Avatar, AvatarGroup } from "@/components/ui/avatar"23<Avatar name="سارا محمدی" src="/avatars/sara.jpg" />4<Avatar name="علی رضایی" />5<AvatarGroup people={[{ name: "سارا", src: "/avatars/sara.jpg" }, { name: "علی", src: "/avatars/ali.jpg" }, { name: "نگار" }, { name: "رضا" }, { name: "مینا" }]} max={4} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| name | string | - | title و حرف اول وقتی تصویر نیست. |
| src | string | - | آدرس تصویر. اگر نباشه، حرف اول اسم سفید نشان داده میشه. |
| size | "sm" | "md" | "lg" | "md" | اندازه. |