import { Headline1 } from '@/components/ui/typography';

export default function Component() {
  return <Headline1>Taxing Laughter: The Joke Tax Chronicles</Headline1>;
}

import { Headline2 } from '@/components/ui/typography';

export default function Component() {
  return <Headline2>The People of the Kingdom</Headline2>;
}

import { Headline3 } from '@/components/ui/typography';

export default function Component() {
  return <Headline3>The Joke Tax</Headline3>;
}

import { Body1 } from '@/components/ui/typography';

export default function Component() {
  return (
    <Body1>
      The king, seeing how much happier his subjects were, realized the error of
      his ways and repealed the joke tax.
    </Body1>
  );
}

import { Body1 } from '@/components/ui/typography';

export default function Component() {
  return (
    <blockquote className="border-l-4 border-zinc-300 pl-4 italic dark:border-zinc-700">
      <Body1>
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </Body1>
    </blockquote>
  );
}

import { Body2 } from '@/components/ui/typography';

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

import { Body1 } from '@/components/ui/typography';

export default function Component() {
  return (
    <Body1>
      Run the following command:{' '}
      <code className="relative rounded bg-zinc-100 px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold dark:bg-zinc-800">
        npm install
      </code>
    </Body1>
  );
}

import { Display3 } from '@/components/ui/typography';

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

import { Title1 } from '@/components/ui/typography';

export default function Component() {
  return <Title1>Are you absolutely sure?</Title1>;
}

import { Label1 } from '@/components/ui/typography';

export default function Component() {
  return <Label1>Email address</Label1>;
}

import { Body2 } from '@/components/ui/typography';

export default function Component() {
  return <Body2 className="text-muted-foreground">Enter your email address.</Body2>;
}