حالة الرسالة

تحت الرسالة المرسلة: الوقت وأيقونة الحالة، من جارٍ الإرسال إلى قُرئت أو لم تُرسل.

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

أضف المكوّن
$ npx ritla add message-status
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/message-status
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

message-status.tsx

import { MessageStatus } from "@/components/ui/message-status";<MessageStatus status="read" time="09:41" />

الخاصية	النوع	الافتراضي	الوصف
`status`	`"sending" \| "sent" \| "delivered" \| "read" \| "failed"`	لا يوجد	خاصية Status.
`time / dateTime`	`ReactNode / string`	لا يوجد	خاصية Time والقيمة الآلية.
`showLabel`	`boolean`	`false`	خاصية Show label؛ بدونها يبقى النص لقارئ الشاشة.
`label`	`ReactNode`	لا يوجد	يستبدل التسمية المدمجة.