import Layout from '../../components/Layout'
import { FoundationSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Heading, Paragraph, Code } from '@knkui/typography';

export default function Typography() {
    return (
        <Layout
            title="Typography"
            showHero
            description="Typography is our system of fonts. Each font conveys the appropriate sentiment to assist our users through each stage of their journey."
            sidebar={FoundationSidebar}
        >
            <Heading size={800}>Font families</Heading>
            <Paragraph>
                We use three font family stacks, <Code>ui</Code>, <Code>display</Code> and <Code>mono</Code>. Text components will set the font family accordingly to their use case. There is not need for you to override this on a component level.
            </Paragraph>
            <Heading size={800}>Heading component</Heading>
            <Paragraph>
                The <Code>Heading</Code> component is used for all headings.
            </Paragraph>
            <Paragraph>
                The size options are: <Code>100</Code>, <Code>200</Code>, <Code>300</Code>, <Code>400</Code>, <Code>500</Code> (default), <Code>600</Code>, <Code>700</Code>, <Code>800</Code>, <Code>900</Code>.
            </Paragraph>

            <Playground
                isOpenByDefault={false}
                codeText={
`
<div>
    <Heading size={100}>
        100: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={200}>
        200: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={300}>
        300: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={400}>
        400: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={500}>
        500: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={600}>
        600: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={700}>
        700: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={800}>
        800: The quick brown fox jumps over the lazy dog
    </Heading>
    <Heading size={900}>
        900: The quick brown fox jumps over the lazy dog
    </Heading>
</div>
`
                }
            />
            <Heading is="h2" size={700}>Changing the semantic element</Heading>
            <Paragraph>
                The <Code>Heading</Code> component will always render a <Code>h2</Code> until
                you specify otherwise with the <Code>is</Code> property.
                It’s important to realize that the style of a heading is independent from
                the semantic underlying element.
            </Paragraph>

            <Heading size={800}>Text component</Heading>
            <Paragraph>
                The <Code>Text</Code> component is used for single line text.
                The component renders a <Code>span</Code> element by default.
                If you need a multiline paragraph use the <Code>Paragraph</Code> component.
            </Paragraph>
            <Paragraph>
                The size options are: <Code>300</Code>, <Code>400</Code> (default), <Code>500</Code>
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<div>
    <div>
        <Text size={300}>The quick brown fox jumps over the lazy dog</Text>
    </div>
    <div>
        <Text>The quick brown fox jumps over the lazy dog</Text>
    </div>
    <div>
        <Text size={500}>The quick brown fox jumps over the lazy dog</Text>
    </div>
</div>
`
                }
            />

            <Heading size={800}>Paragraph component</Heading>
            <Paragraph>
                The <Code>Paragraph</Code> component is used for multiline text. This renders a <Code>p</Code> element by default.
            </Paragraph>
            <Paragraph>
                The size options are: <Code>300</Code>, <Code>400</Code> (default), <Code>500</Code>
            </Paragraph>

            <Playground
                isOpenByDefault={false}
                codeText={
`
<div>
        <Paragraph size={300}>The quick brown fox jumps over the lazy dog</Paragraph>
        <Paragraph>The quick brown fox jumps over the lazy dog</Paragraph>
        <Paragraph size={500}>The quick brown fox jumps over the lazy dog</Paragraph>
</div>
`
                }
            />

            <Heading size={800}>Link component</Heading>
            <Paragraph>
                The <Code>Link</Code> component is used for anchor links. This component renders a <Code>a</Code> element by default.
            </Paragraph>
            <Paragraph>
                The size options are: <Code>300</Code>, <Code>400</Code> (default), <Code>500</Code>
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<div>
    <Link href="#" style={{marginRight: 12}}>Default</Link>
    <Link href="#" color="red">Default</Link>
</div>
`
            }
            />

            <Heading size={800}>Strong component</Heading>
            <Paragraph>
                The <Code>Strong</Code> component renders strong text.
                This component renders a <Code>strong</Code> element by default.
                Make sure to set the size property if you are using this within a other
                text component such as a Paragraph.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<div>
  <div>
    <Strong size={300}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
  <div>
    <Strong size={400}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
  <div>
    <Strong size={500}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
</div>
`
                }
            />

            <Heading size={800}>Small component</Heading>
            <Paragraph>
                The <Code>Small</Code> component works only inside other text components.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<Paragraph>
  The <Small>small</Small> component can only be used in a other text component
</Paragraph>
`
                }
            />

            <Heading size={800}>Code component</Heading>
            <Paragraph>
                The <Code>Code</Code> component works only inside other text components.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<Paragraph>
  The <Code>code</Code> component can only be used in a other text component
</Paragraph>
`
                }
            />
        </Layout>
    )
}