Copyimport { Typography } from "@/components/ui/typography"
 
export default function Example() {
  return (
    <div>
      <Typography.H1>The Joke Tax Chronicles</Typography.H1>
      <Typography.P>
        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.
      </Typography.P>
      <Typography.H2>The King's Plan</Typography.H2>
      <Typography.P>
        The king thought long and hard, and finally came up with{" "}
        <Typography.Link href="#">a brilliant plan</Typography.Link>: he would tax the jokes in the
        kingdom.
      </Typography.P>
      <Typography.Blockquote>
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </Typography.Blockquote>
      <Typography.H3>The Joke Tax</Typography.H3>
      <Typography.P>
        The king's subjects were not amused. They grumbled and complained, but
        the king was firm:
      </Typography.P>
      <Typography.List>
        <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>
      </Typography.List>
      <Typography.P>
        As a result, people stopped telling jokes, and the kingdom became a very
        boring place. But at least the king was able to balance his budget.
      </Typography.P>
    </div>
  )
}

Copy<Typography.H1>The Joke Tax Chronicles</Typography.H1>

Copy<Typography.H2>The People of the Kingdom</Typography.H2>

Copy<Typography.H3>The Joke Tax</Typography.H3>

Copy<Typography.H4>People stopped telling jokes</Typography.H4>

Copy<Typography.P>
  The king, seeing how much happier his subjects were, realized the importance
  of a good joke. He promptly abolished the joke tax.
</Typography.P>

Copy<Typography.Blockquote>
  "After all," he said, "everyone enjoys a good joke, so it's only fair that
  they should pay for the privilege."
</Typography.Blockquote>

Copy<Typography.Table>
  <Typography.TableHeader>
    <Typography.TableRow>
      <Typography.TableHead className="w-[100px]">King's Treasury</Typography.TableHead>
      <Typography.TableHead>People's happiness</Typography.TableHead>
    </Typography.TableRow>
  </Typography.TableHeader>
  <Typography.TableBody>
    <Typography.TableRow>
      <Typography.TableCell className="font-medium">Empty</Typography.TableCell>
      <Typography.TableCell>Overflowing</Typography.TableCell>
    </Typography.TableRow>
    <Typography.TableRow>
      <Typography.TableCell className="font-medium">Modest</Typography.TableCell>
      <Typography.TableCell>Happy</Typography.TableCell>
    </Typography.TableRow>
    <Typography.TableRow>
      <Typography.TableCell className="font-medium">Full</Typography.TableCell>
      <Typography.TableCell>Ecstatic</Typography.TableCell>
    </Typography.TableRow>
  </Typography.TableBody>
</Typography.Table>

Copy<Typography.List>
  <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>
</Typography.List>

Copy<Typography.P>
  You can use the <Typography.InlineCode>Typography.InlineCode</Typography.InlineCode> component for inline code.
</Typography.P>

Copy<Typography.Lead>
  A modal dialog that interrupts the user with important content and expects a
  response.
</Typography.Lead>

Copy<Typography.Large>Are you absolutely sure?</Typography.Large>

Copy<Typography.Small>Enter your email address.</Typography.Small>

Copy<Typography.Muted>Enter your email address.</Typography.Muted>