import { Text } from "@hummingbirdui/react";

export default function TextDefault() {
  return (
    <Text>
      The quick brown fox jumps over the lazy dog. Typography is the art of
      arranging type to make written language legible and appealing.
    </Text>
  );
}

import { Text } from "@hummingbirdui/react";

export default function TextHeadings() {
  return (
    <div className="flex flex-col gap-2">
      <Text as="h1">Heading 1</Text>
      <Text as="h2">Heading 2</Text>
      <Text as="h3">Heading 3</Text>
      <Text as="h4">Heading 4</Text>
      <Text as="h5">Heading 5</Text>
      <Text as="h6">Heading 6</Text>
    </div>
  );
}

import { Text } from "@hummingbirdui/react";

export default function TextElements() {
  return (
    <div className="flex flex-col gap-2">
      <Text as="span">Span text</Text>
      <Text as="strong">Strong text</Text>
      <Text as="em">Emphasis text</Text>
      <Text as="small">Small text</Text>
      <Text as="label">Label text</Text>
      <Text as="code">Code text</Text>
      <Text as="mark">Mark text</Text>
      <Text as="del">Deleted text</Text>
      <Text as="ins">Inserted text</Text>
    </div>
  );
}

import { Text } from "@hummingbirdui/react";

export default function TextSizes() {
  return (
    <div className="flex flex-col gap-2">
      <Text size="xs">Text xs</Text>
      <Text size="sm">Text sm</Text>
      <Text size="base">Text base</Text>
      <Text size="lg">Text lg</Text>
      <Text size="xl">Text xl</Text>
      <Text size="2xl">Text 2xl</Text>
      <Text size="3xl">Text 3xl</Text>
      <Text size="4xl">Text 4xl</Text>
      <Text size="5xl">Text 5xl</Text>
      <Text size="6xl">Text 6xl</Text>
      <Text size="7xl">Text 7xl</Text>
      <Text size="8xl">Text 8xl</Text>
      <Text size="9xl">Text 9xl</Text>
    </div>
  );
}

import { Text } from "@hummingbirdui/react";

export default function TextWeights() {
  return (
    <div className="flex flex-col gap-2">
      <Text fontWeight="thin">Font weight thin</Text>
      <Text fontWeight="extralight">Font weight extralight</Text>
      <Text fontWeight="light">Font weight light</Text>
      <Text fontWeight="normal">Font weight normal</Text>
      <Text fontWeight="medium">Font weight medium</Text>
      <Text fontWeight="semibold">Font weight semibold</Text>
      <Text fontWeight="bold">Font weight bold</Text>
      <Text fontWeight="extrabold">Font weight extrabold</Text>
      <Text fontWeight="black">Font weight black</Text>
    </div>
  );
}

import { Text } from "@hummingbirdui/react";

export default function TextTruncate() {
  return (
    <Text truncate className="max-w-xs">
      This is a long line of text that gets cut off with an ellipsis once it
      runs out of horizontal space inside its container.
    </Text>
  );
}

import { Text } from "@hummingbirdui/react";

export default function TextLineClamp() {
  return (
    <Text lineClamp={2} className="max-w-sm">
      Line clamping limits a block of text to the given number of lines and
      truncates the rest with an ellipsis. This paragraph is intentionally long
      so the overflow beyond the second line is hidden from view.
    </Text>
  );
}