Typography

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

export default function TypographyDemo() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <Typography variant="h1">The Joke Tax Chronicles</Typography>
      <Typography variant="lead">
        A modest tale of typography and taxation.
      </Typography>
      <Typography variant="gradient" as="h2" className="text-3xl font-bold">
        Gradient Heading
      </Typography>
      <Typography variant="p">
        Once upon a time, in a far-off land, there was a very lazy king who
        spent all day lounging on his throne.
      </Typography>
      <Typography variant="blockquote">
        &ldquo;After all,&rdquo; he said, &ldquo;everyone enjoys a good joke, so
        it&apos;s only fair that they should pay for the privilege.&rdquo;
      </Typography>
      <Typography variant="p">
        You can also{" "}
        <Typography as="span" variant="highlight">
          highlight
        </Typography>{" "}
        important words, or reference{" "}
        <Typography as="code" variant="code">
          const answer = 42
        </Typography>{" "}
        inline.
      </Typography>
      <Typography variant="muted">A small muted footnote.</Typography>
    </div>
  );
}