import { Playground, Props } from "@slytrunk/docs";
import { View } from "../View";
import Text from "./Text";

# Text

Base component for rendering text. Text will inherit default fonts and colors from the theme, but can also be overridden per use. Text also supports variants for creating reusable bits of styling in themes, they can be found under the `variants.text` key.

<Props of={Text} />

## Basic usage

<Playground>
  <Text>Hello</Text>
</Playground>

## Sizes

<Playground>
  <View>
    <Text h1>Heading 1</Text>
  </View>
  <View>
    <Text h2>Heading 2</Text>
  </View>
  <View>
    <Text h3>Heading 3</Text>
  </View>
  <View>
    <Text h4>Heading 4</Text>
  </View>
  <View>
    <Text h5>Heading 5</Text>
  </View>
  <View>
    <Text h6>Heading 6</Text>
  </View>
  <View>
    <Text size="xxl">Big Stuff</Text>
  </View>
</Playground>

## Styles

<Playground>
  <View>
    <Text>
      I am <Text bold>bold</Text>.
    </Text>
  </View>
  <View>
    <Text as="a">I look like a link</Text>
  </View>
</Playground>

## Variants

<Playground>
  <View>
    <Text variant="uppercase">Uppercase Text!</Text>
  </View>
</Playground>