export default function TypographyDemoExample() {
  return (
...

export default function TypographyDemoExample() {
  return (
    <article>
      <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">Taxing Laughter: The Joke Tax Chronicles</h1>
      <p class="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.</p>
      <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">The King&apos;s Plan</h2>
      <p class="leading-7 [&:not(:first-child)]:mt-6">The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.</p>
      <blockquote class="mt-6 border-l-2 pl-6 italic">&quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so it&apos;s only fair that they should pay for the privilege.&quot;</blockquote>
      <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">The Joke Tax</h3>
      <p class="leading-7 [&:not(:first-child)]:mt-6">The king&apos;s subjects were not amused. They grumbled and complained, but the king was firm:</p>
      <ul class="my-6 ml-6 list-disc [&>li]:mt-2"><li>1st level of puns: 5 gold coins</li><li>2nd level of jokes: 10 gold coins</li><li>3rd level of one-liners: 20 gold coins</li></ul>
      <p class="leading-7 [&:not(:first-child)]:mt-6">As a result, people stopped telling jokes, and the kingdom fell into a gloom. But a court jester named Jokester refused to let the king&apos;s foolishness get him down.</p>
      <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">Jokester&apos;s Revolt</h3>
      <p class="leading-7 [&:not(:first-child)]:mt-6">Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place. The king was furious, but he couldn&apos;t seem to stop Jokester.</p>
      <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">The People&apos;s Rebellion</h3>
      <p class="leading-7 [&:not(:first-child)]:mt-6">The people started to tell jokes and puns again, and soon the entire kingdom was in on the joke.</p>
      <div class="my-6 w-full overflow-y-auto"><table class="w-full"><thead><tr><th class="border px-4 py-2 text-left font-bold">King&apos;s Treasury</th><th class="border px-4 py-2 text-left font-bold">People&apos;s happiness</th></tr></thead><tbody><tr><td class="border px-4 py-2">Empty</td><td class="border px-4 py-2">Overflowing</td></tr><tr><td class="border px-4 py-2">Modest</td><td class="border px-4 py-2">Satisfied</td></tr><tr><td class="border px-4 py-2">Full</td><td class="border px-4 py-2">Ecstatic</td></tr></tbody></table></div>
      <p class="leading-7 [&:not(:first-child)]:mt-6">The king realized the error of his ways and repealed the joke tax. The moral: never underestimate the power of a good laugh.</p>
    </article>
  )
}

export default function TypographyH1Example() {
  return (
...

export default function TypographyH1Example() {
  return (
    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">Taxing Laughter: The Joke Tax Chronicles</h1>
  )
}

export default function TypographyH2Example() {
  return (
...

export default function TypographyH2Example() {
  return (
    <h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">The People of the Kingdom</h2>
  )
}

export default function TypographyH3Example() {
  return (
...

export default function TypographyH3Example() {
  return (
    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">The Joke Tax</h3>
  )
}

export default function TypographyH4Example() {
  return (
...

export default function TypographyH4Example() {
  return (
    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">People stopped telling jokes</h4>
  )
}

export default function TypographyPExample() {
  return (
...

export default function TypographyPExample() {
  return (
    <p class="leading-7 [&:not(:first-child)]:mt-6">The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.</p>
  )
}

export default function TypographyBlockquoteExample() {
  return (
...

export default function TypographyBlockquoteExample() {
  return (
    <blockquote class="mt-6 border-l-2 pl-6 italic">&quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so it&apos;s only fair that they should pay for the privilege.&quot;</blockquote>
  )
}

export default function TypographyTableExample() {
  return (
...

export default function TypographyTableExample() {
  return (
    <div class="my-6 w-full overflow-y-auto">
      <table class="w-full">
        <thead><tr class="m-0 border-t p-0 even:bg-muted"><th class="border px-4 py-2 text-left font-bold">King&apos;s Treasury</th><th class="border px-4 py-2 text-left font-bold">People&apos;s happiness</th></tr></thead>
        <tbody><tr class="m-0 border-t p-0 even:bg-muted"><td class="border px-4 py-2 text-left">Empty</td><td class="border px-4 py-2 text-left">Overflowing</td></tr><tr class="m-0 border-t p-0 even:bg-muted"><td class="border px-4 py-2 text-left">Modest</td><td class="border px-4 py-2 text-left">Satisfied</td></tr><tr class="m-0 border-t p-0 even:bg-muted"><td class="border px-4 py-2 text-left">Full</td><td class="border px-4 py-2 text-left">Ecstatic</td></tr></tbody>
      </table>
    </div>
  )
}

export default function TypographyListExample() {
  return (
...

export default function TypographyListExample() {
  return (
    <ul class="my-6 ml-6 list-disc [&>li]:mt-2"><li>1st level of puns: 5 gold coins</li><li>2nd level of jokes: 10 gold coins</li><li>3rd level of one-liners: 20 gold coins</li></ul>
  )
}

export default function TypographyInlineCodeExample() {
  return (
...

export default function TypographyInlineCodeExample() {
  return (
    <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">@fictjs/radix-ui</code>
  )
}

export default function TypographyLeadExample() {
  return (
...

export default function TypographyLeadExample() {
  return (
    <p class="text-xl text-muted-foreground">A modal dialog that interrupts the user with important content and expects a response.</p>
  )
}

export default function TypographyLargeExample() {
  return (
...

export default function TypographyLargeExample() {
  return (
    <div class="text-lg font-semibold">Are you absolutely sure?</div>
  )
}

export default function TypographySmallExample() {
  return (
...

export default function TypographySmallExample() {
  return (
    <small class="text-sm leading-none font-medium">Email address</small>
  )
}

export default function TypographyMutedExample() {
  return (
...

export default function TypographyMutedExample() {
  return (
    <p class="text-sm text-muted-foreground">Enter your email address.</p>
  )
}

const translations = {
  ar: { dir: 'rtl', title: 'فرض الضرائب على الضحك: سجلات ضريبة النكتة', lead: 'في قديم الزمان، في أرض بعيدة، كان هناك ملك كسول جداً يقضي يومه كله مستلقياً على عرشه.', plan: 'خطة الملك', jokeTax: 'ضريبة النكتة', revolt: 'ثورة المازح', people: 'ثورة الشعب', quote: '"في النهاية، الجميع يستمتع بنكتة جيدة، لذا من العدل أن يدفعوا مقابل هذا الامتياز."', levels: ['المستوى الأول من التورية: 5 قطع ذهبية', 'المستوى الثاني من النكات: 10 قطع ذهبية', 'المستوى الثالث من النكات القصيرة: 20 قطعة ذهبية'], treasury: ['خزينة الملك', 'فارغة', 'متواضعة', 'ممتلئة'], happiness: ['سعادة الشعب', 'فائضة', 'راضٍ', 'منتشٍ'] },
...

const translations = {
  ar: { dir: 'rtl', title: 'فرض الضرائب على الضحك: سجلات ضريبة النكتة', lead: 'في قديم الزمان، في أرض بعيدة، كان هناك ملك كسول جداً يقضي يومه كله مستلقياً على عرشه.', plan: 'خطة الملك', jokeTax: 'ضريبة النكتة', revolt: 'ثورة المازح', people: 'ثورة الشعب', quote: '"في النهاية، الجميع يستمتع بنكتة جيدة، لذا من العدل أن يدفعوا مقابل هذا الامتياز."', levels: ['المستوى الأول من التورية: 5 قطع ذهبية', 'المستوى الثاني من النكات: 10 قطع ذهبية', 'المستوى الثالث من النكات القصيرة: 20 قطعة ذهبية'], treasury: ['خزينة الملك', 'فارغة', 'متواضعة', 'ممتلئة'], happiness: ['سعادة الشعب', 'فائضة', 'راضٍ', 'منتشٍ'] },
  he: { dir: 'rtl', title: 'מיסוי הצחוק: כרוניקות מס הבדיחה', lead: 'היה היה פעם, בארץ רחוקה, מלך עצלן מאוד שבילה את כל היום בהתרווחות על כס מלכותו.', plan: 'התוכנית של המלך', jokeTax: 'מס הבדיחה', revolt: 'המרד של הבדחן', people: 'המרד של העם', quote: '"אחרי הכל, כולם נהנים מבדיחה טובה, אז זה רק הוגן שישלמו על הזכות הזו."', levels: ['רמה ראשונה של משחקי מילים: 5 מטבעות זהב', 'רמה שנייה של בדיחות: 10 מטבעות זהב', 'רמה שלישית של חידודים: 20 מטבעות זהב'], treasury: ['אוצר המלך', 'ריק', 'צנוע', 'מלא'], happiness: ['אושר העם', 'גדוש', 'מרוצה', 'אקסטטי'] },
  en: { dir: 'ltr', title: 'Taxing Laughter: The Joke Tax Chronicles', lead: 'Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne.', plan: "The King's Plan", jokeTax: 'The Joke Tax', revolt: "Jokester's Revolt", people: "The People's Rebellion", quote: '"After all, everyone enjoys a good joke, so it is only fair that they should pay for the privilege."', levels: ['1st level of puns: 5 gold coins', '2nd level of jokes: 10 gold coins', '3rd level of one-liners: 20 gold coins'], treasury: ["King's Treasury", 'Empty', 'Modest', 'Full'], happiness: ["People's happiness", 'Overflowing', 'Satisfied', 'Ecstatic'] },
} as const

export default function TypographyRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const t = translations[language]
  return (
    <div>
      <select aria-label="Preview language" value={language} onChange={event => language = event.currentTarget.value as keyof typeof translations}>
        <option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option>
      </select>
      <article dir={t.dir}>
        <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">{t.title}</h1>
        <p class="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">{t.lead}</p>
        <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">{t.plan}</h2>
        <blockquote class="mt-6 border-s-2 ps-6 italic">{t.quote}</blockquote>
        <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">{t.jokeTax}</h3>
        <ul class="my-6 ms-6 list-disc [&>li]:mt-2">{t.levels.map(level => <li>{level}</li>)}</ul>
        <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">{t.revolt}</h3>
        <p class="leading-7 [&:not(:first-child)]:mt-6">{t.lead}</p>
        <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">{t.people}</h3>
        <div class="my-6 w-full overflow-y-auto"><table class="w-full"><thead><tr><th class="border px-4 py-2 text-start font-bold">{t.treasury[0]}</th><th class="border px-4 py-2 text-start font-bold">{t.happiness[0]}</th></tr></thead><tbody>{[1, 2, 3].map(index => <tr><td class="border px-4 py-2 text-start">{t.treasury[index]}</td><td class="border px-4 py-2 text-start">{t.happiness[index]}</td></tr>)}</tbody></table></div>
      </article>
    </div>
  )
}