محمد جواد

محمد جواد

سازنده فارسی‌فای

@MmdjDevآنلاین
پیام

کارتِ نمایهProfile Card

کارتِ نمایه‌ی هولوگرافیک با کج‌شدنِ فنری زیرِ نشانگر، لایه‌ی هولوی الگوپذیر، درخششِ نور و عمقِ پارالاکس — با نشانِ وضعیت و دکمه‌ی تماس.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

بدون وابستگی

نوع تعامل

کارت زیرِ نشانگر با فنر کج می‌شه، نور با آن می‌چرخه و لایه‌ی هولوگرام سرِ جاش می‌لغزه؛ روی لمس همین با انگشته و با `enableMobileTilt` کج‌کردنِ گوشی هم کارت رو تکون می‌ده (توی iOS با اولین لمس اجازه می‌گیره). ورود با یه فنرِ کشیده‌ی ۱٫۴ ثانیه‌ایه. هندسه آینه نشده: کجی و نور فیزیکن.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

avatarUrl
string

پرتره‌ی روی کاشی.

iconUrl
string

تصویرِ الگوی هولوگرام؛ بدونِ آن یک گرادیانتِ ملایم می‌نشیند.

miniAvatarUrl
string

آواتارِ گردِ کوچک کنارِ دسته در پودر.

name
stringپیش‌فرض: "نامِ شما"

نامِ روی کاشی — پیش‌فرض جای‌نگهدار است، نه یک آدمِ ساختگی.

title
stringپیش‌فرض: "عنوانِ شغلی"

زیرِ نام.

handle
stringپیش‌فرض: "username"

دسته‌ی پودر (بی‌@؛ خودش گذاشته می‌شه).

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

components.jsonjson
{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/profile-card

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

profile-card.tsxtsx
"use client";

import ProfileCard from "@/components/farsify/profile-card";

export function SpeakerTile() {
  return (
    <ProfileCard
      avatarUrl="/avatar.jpg"
      name="نامِ شما"
      title="عنوانِ شغلی"
      handle="username"
      status="آنلاین"
      contactText="پیام"
      iconUrl="/holo-pattern.png"
    />
  );
}

// فویل از تیره/روشناییِ رنگِ پشت درمی‌آید
<ProfileCard backdropColor="#7dd3fc" holo={1} glare={0.8} />

نکته‌ها

  • ⚠️ پیشوندِ متغیرهای CSS این کامپوننت `--pfc-*`ـه، نه `--pc-*` مرجع — اون پیشوند توی این مخزن مالِ sponsor-cardـه (پیش‌گام: paper-crumple با `--pcr-*`). نام‌ها مکانیکی عوض شدن و هیچ مقداری فرق نکرده.
  • فویلِ هولوگرام از تیره/روشناییِ `backdropColor` درمی‌آد (سطحِ تیره = color-dodge، روشن = multiply) — پس رنگِ پشت هم شخصیتِ هولوگرام رو عوض می‌کنه، نه فقط زمینه رو.
  • پیش‌فرضِ متنی «آنلاین/پیام» فارسی شد؛ نام و عنوانِ فارسی رو از prop بده و برای خطِ فارسی دست به `line-height` قاعده‌مند بزن (۱٫۲۵ نام / ۱٫۴۵ عنوان — بالاتر از جوهرِ فونت).
  • روی موبایل دو حسِ جدا داری: لمسِ همون کارت و — با `enableMobileTilt` — کج‌کردنِ خودِ گوشی؛ الگوی اجازه‌ی iOS خودکاره.
  • فویل توی تمِ روشن `invert(1) hue-rotate(180deg)` می‌گیره — الگوی رنگیِ تیره رو بده تا توی هر دو تم درست دیده شه.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.