TypographyRtl() — ui Function Reference

Architecture documentation for the TypographyRtl() function in typography-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ TypographyRtl() — ui Function Reference

Dependency Diagram

graph TD
  3cbaa153_32e3_8a91_df78_45cfda9c9ea4["TypographyRtl()"]
  be7926ae_c9ab_36d4_b7fe_e328a0e2fcf3["typography-rtl.tsx"]
  3cbaa153_32e3_8a91_df78_45cfda9c9ea4 -->|defined in| be7926ae_c9ab_36d4_b7fe_e328a0e2fcf3
  style 3cbaa153_32e3_8a91_df78_45cfda9c9ea4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/typography-rtl.tsx lines 139–219

export function TypographyRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <div dir={dir}>
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
        {t.title}
      </h1>
      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
        {t.leadParagraph}
      </p>
      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
        {t.kingsPlan}
      </h2>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        {t.kingThought}{" "}
        <a
          href="#"
          className="text-primary font-medium underline underline-offset-4"
        >
          {t.brilliantPlan}
        </a>
        {t.taxJokes}
      </p>
      <blockquote className="mt-6 border-s-2 ps-6 italic">
        {t.blockquote}
      </blockquote>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        {t.jokeTax}
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        {t.subjectsNotAmused}
      </p>
      <ul className="my-6 ms-6 list-disc [&>li]:mt-2">
        <li>{t.level1}</li>
        <li>{t.level2}</li>
        <li>{t.level3}</li>
      </ul>
      <p className="leading-7 [&:not(:first-child)]:mt-6">{t.stoppedTelling}</p>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        {t.jokestersRevolt}
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">{t.sneaking}</p>
      <p className="leading-7 [&:not(:first-child)]:mt-6">{t.discovered}</p>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        {t.peoplesRebellion}
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">{t.uplifted}</p>
      <div className="my-6 w-full overflow-y-auto">
        <table className="w-full">
          <thead>
            <tr className="even:bg-muted m-0 border-t p-0">
              <th className="border px-4 py-2 text-start font-bold">
                {t.kingsTreasury}
              </th>
              <th className="border px-4 py-2 text-start font-bold">
                {t.peoplesHappiness}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="even:bg-muted m-0 border-t p-0">
              <td className="border px-4 py-2 text-start">{t.empty}</td>
              <td className="border px-4 py-2 text-start">{t.overflowing}</td>
            </tr>
            <tr className="even:bg-muted m-0 border-t p-0">
              <td className="border px-4 py-2 text-start">{t.modest}</td>
              <td className="border px-4 py-2 text-start">{t.satisfied}</td>
            </tr>
            <tr className="even:bg-muted m-0 border-t p-0">
              <td className="border px-4 py-2 text-start">{t.full}</td>
              <td className="border px-4 py-2 text-start">{t.ecstatic}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="leading-7 [&:not(:first-child)]:mt-6">{t.realized}</p>
      <p className="leading-7 [&:not(:first-child)]:mt-6">{t.moral}</p>
    </div>
  )
}