در انتظار: خروجیِ بیلد

نشانگرِ وضعیتStatus Mark

گلیفِ وضعیت با پنج حالت — در انتظار، در حال انجام، انجام شد، ناموفق و لغو شد — که حلقه‌اش می‌چرخه و آخرش به تیک یا ضربدر می‌نشینه.

محمدجواد

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

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

وابستگی‌ها

motion

نوع تعامل

کامپوننت ورودی نمی‌گیره و با `status` اداره می‌شه. توی «در انتظار» هشت خط‌چینِ ساکن می‌نشینه؛ توی «در حال انجام» اگه `progress` بدی کمان به همون نسبت پر می‌شه و اگه نه کمانِ کوتاه دورِ حلقه می‌چرخه. «انجام شد» تیک رو می‌کشه، دایره رو کم‌رنگ پر می‌کنه و برچسب رو خط می‌زنه؛ «ناموفق» و «لغو شد» ضربدر می‌کشن و برچسبِ لغوشده خط می‌خوره.

پراپ‌ها

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

status
"pending" | "running" | "done" | "failed" | "cancelled"پیش‌فرض: "pending"pending · running · done · failed · cancelled

وضعیتِ فعلی؛ هر پنج حالت متنِ فارسیِ خودشون رو دارن.

progress
number

فقط توی «running» معنا داره؛ ۰ تا ۱ یا ۰ تا ۱۰۰ (بالای ۱ درصدی خونده می‌شه).

label
string

برچسبِ کنارِ گلیف؛ اگه نیاد فقط گلیف می‌آد.

color
stringپیش‌فرض: "currentColor"

رنگِ اصلیِ حلقه و نقش‌ها.

doneColor
stringپیش‌فرض: "#22c55e"

رنگِ تیکِ پایان.

errorColor
stringپیش‌فرض: "#ef4444"

رنگِ ضربدرِ شکست و لغو.

نصب

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

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

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

npx shadcn@latest add @farsify/status-mark

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

نمونه

status-mark.tsxtsx
"use client";

import { StatusMark, type StatusMarkStatus } from "@/components/farsify/status-mark";

export function BuildRow({ status, progress }: {
  status: StatusMarkStatus;
  progress: number;
}) {
  return (
    <StatusMark
      status={status}
      progress={progress}
      label="خروجیِ بیلد"
      size={20}
      fontSize={14}
    />
  );
}

// پیشرفت با درصدِ ۰ تا ۱۰۰ هم کار می‌کند، نه فقط نسبتِ ۰ تا ۱
<StatusMark status="running" progress={62} label="در حال آپلود" />

// بدونِ برچسب، فقط گلیف — با نامِ دسترس‌پذیرِ خودکار
<StatusMark status="done" doneColor="var(--color-brand)" />

// لغو‌شده با خط‌خوردگیِ دیرهنگام
<StatusMark status="cancelled" strike strikeDelay={120} label="درخواستِ منقضی" />

نکته‌ها

  • `progress` دو مقیاس می‌گیره: نسبتِ ۰ تا ۱ (مثلِ مرجع) و درصدِ ۰ تا ۱۰۰. اگه توی فرمِ خودت درصدِ گرد داری، همون ۰ تا ۱۰۰ رو بده — خودش نرمال می‌کنه.
  • برای فهرستِ کارها یه برچسبِ ثابت بده (مثلاً «خروجیِ بیلد») نه نامِ وضعیت: متنِ وضعیت خودکار توی نامِ دسترس‌پذیر می‌آد و تکرارش باعث می‌شه صفحه‌خوان «انجام شد، انجام شد» بخونه.
  • گلیف اولین فرزندِ فلکسِ ریشه‌ست، پس توی `dir="rtl"` خودکار سمتِ راست می‌نشینه و متن سمتِ چپ — هیچ `order` یا `flex-direction` تازه‌ای لازم نیست.
  • با `prefers-reduced-motion` چرخش و کشیده‌شدن حذف می‌شن و نقش‌ها مستقیم توی جای نهایی می‌نشینن؛ وضعیت باز هم از رنگ و برچسب خونده می‌شه.

مجوز

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