import { Prose } from "@rdloom/react";

export default function TypographyProseExample() {
  return (
    <div className="flex w-full justify-center">
      <Prose>
        <h2>Shipping a release</h2>
        <p>
          A release starts from <code>main</code>. Read the <a href="#notes">release notes</a> before you tag it.
        </p>
        <h3>Checklist</h3>
        <ul>
          <li>Run the full test suite</li>
          <li>Update the changelog</li>
        </ul>
        <blockquote>Small releases are easier to roll back.</blockquote>
        <hr />
        <table>
          <thead>
            <tr>
              <th>Step</th>
              <th>Owner</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Tag</td>
              <td>Release manager</td>
            </tr>
            <tr>
              <td>Announce</td>
              <td>Support</td>
            </tr>
          </tbody>
        </table>
      </Prose>
    </div>
  );
}

import { Lead, Text } from "@rdloom/react";

export default function TypographyTextTonesExample() {
  return (
    <div className="flex w-full justify-center">
      <div className="flex w-full max-w-md flex-col gap-2">
        <Lead>A short introduction to the page.</Lead>
        <Text size="lg">Large default text</Text>
        <Text>Medium default text</Text>
        <Text size="sm" tone="muted">
          Small muted helper text
        </Text>
        <Text size="sm" tone="danger">
          The password must have at least 8 characters.
        </Text>
        <Text>
          Inline{" "}
          <Text as="span" tone="muted">
            muted span
          </Text>{" "}
          inside a paragraph.
        </Text>
      </div>
    </div>
  );
}

import { Blockquote, InlineCode, List, ListItem } from "@rdloom/react";

export default function TypographyListsAndQuoteExample() {
  return (
    <div className="flex w-full justify-center">
      <div className="flex w-full max-w-md flex-col gap-4">
        <List>
          <ListItem>Install the package</ListItem>
          <ListItem>
            Import <InlineCode>Heading</InlineCode> where you need it
          </ListItem>
        </List>
        <List ordered>
          <ListItem>Write the spec</ListItem>
          <ListItem>Build the component</ListItem>
        </List>
        <Blockquote source="A teammate">Say what the page is for before you style it.</Blockquote>
      </div>
    </div>
  );
}