تایپوگرافی

import { Typography } from "@/components/ui/typography.tsx";

export function TypographyDemo() {
  return (
    <div className="flex flex-col gap-5">
      <Typography variant="heading">عنوان با font-v1</Typography>
      <Typography variant="lede" className="max-w-[var(--measure)]">
        این یک پاراگراف نمونه با font-serif (وزیرمتن) است؛ برای متن‌های خواندنی مثل مقدمه یا
        خلاصه‌ی نوشته‌ها استفاده می‌شود.
      </Typography>
      <Typography variant="caption">
        متن فرعی با رنگ subText — برای توضیحات کم‌اهمیت‌تر.
      </Typography>
      <Typography variant="faint">
        متن کم‌رنگ‌تر با faint — فقط برای برچسب‌های کم‌اهمیت.
      </Typography>
      <Typography variant="body">
        <Typography as="span" variant="mono">
          42
        </Typography>{" "}
        مورد یافت شد — اعداد لاتین با font-mono.
      </Typography>
    </div>
  );
}