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

export default function Avatar() {
    return (
        <Layout
            title="Avatar"
            showHero
            description="The Avatar component is used to represent users. And should only be used for users."
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Basic example</Heading>
            <Paragraph>
                A default image is displayed for avatars when a chosen source is unavailable (for example, when there is a problem displaying the
                image due to an error), or simply unspecified.
            </Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar />`}
            />

            <Heading size={800}>Appearance</Heading>
            <Heading size={700} is="h3">Circle</Heading>
            <Paragraph>Use a <Code>circle</Code> avatar to represent a person.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar
    appearance="circle"
    src="https://pbs.twimg.com/profile_images/714545662268940288/HyP7cLg2_bigger.jpg"
    size="large"
/>`}
            />
            <Heading size={700} is="h3">Square</Heading>
            <Paragraph>Use <Code>square</Code> avatars to represent an entity, such as a project, repository or space. Opt for a height and width of 100 percent.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar
    appearance="square"
    src="https://pbs.twimg.com/profile_images/714545662268940288/HyP7cLg2_bigger.jpg"
    size="medium"
/>`}
            />
            
            <Heading size={800}>Size</Heading>
            <Heading size={700} is="h3">xxlarge</Heading>
            <Paragraph>Use <Code>xxlarge</Code> circle avatars in places where larger avatars are needed. For example, the Atlassian People Directory. This size is currently not used for square avatars.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<div>
    <Avatar size="xxlarge" />
    <Avatar size="xxlarge" appearance="square" />
</div>`}
            />

            <Heading size={700} is="h3">xlarge</Heading>
            <Paragraph>Use <Code>xlarge</Code> circle avatars where they’re needed to display prominently on a page. This size is currently not used for square avatars.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<div>
    <Avatar size="xlarge" />
    <Avatar size="xlarge" appearance="square" />
</div>`}
            />

            <Heading size={700} is="h3">large</Heading>
            <Paragraph>Use <code className="code">large</code> circle avatars to represent people for main page titles, like a user's account settings. Use large square avatars to represent main entity titles like Jira projects or Confluence spaces.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<div>
    <Avatar size="large" />
    <Avatar size="large" appearance="square" />
</div>`}
            />

            <Heading size={700} is="h3">medium</Heading>
            <Paragraph>Use <Code>medium</Code> circle avatars in activity streams or comments. Use medium square avatars in table views for project listings.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<div>
    <Avatar size="medium" />
    <Avatar size="medium" appearance="square" />
</div>`}
            />

            <Heading size={700} is="h3">small</Heading>
            <Paragraph>Use <Code>small</Code> circle avatars in small areas like 40px text fields, and square avatars for use in things like dropdown menus.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<div>
    <Avatar size="small" />
    <Avatar size="small" appearance="square" />
</div>`}
            />

            <Heading size={700} is="h3">xsmall</Heading>
            <Paragraph>Use <Code>xsmall</Code> circle and square avatars for onscreen metadata such as in Jira issues or dropdown menus.</Paragraph>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<div>
    <Avatar size="xsmall" />
    <Avatar size="xsmall" appearance="square" />
</div>`}
            />

            <Heading size={800}>Presence</Heading>

            <Heading size={700} is="h3">busy</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar presence="busy" />`}
            />

            <Heading size={700} is="h3">focus</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar presence="focus" />`}
            />

            <Heading size={700} is="h3">offline</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar presence="offline" />`}
            />

            <Heading size={700} is="h3">online</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar presence="online" />`}
            />

            <Heading size={800}>Status</Heading>

            <Heading size={700} is="h3">approved</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar status="approved" appearance="square" />`}
            />

            <Heading size={700} is="h3">declined</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar status="declined" appearance="square" />`}
            />

            <Heading size={700} is="h3">locked</Heading>
            <Playground
                codeText={`// import { Avatar } from '@knkui/avatar';

<Avatar status="locked" appearance="square" />`}
            />


            <Heading size={800}>AvatarItem</Heading>
            <Paragraph>
                An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.
            </Paragraph>

            <Heading size={700}>Background color</Heading>
            <Paragraph>
                Use a backgroundColor to change the background color of the avatar.
            </Paragraph>
            <Playground
                codeText={
`
<AvatarItem backgroundColor="teal" avatar={<Avatar presence="online" />} />
`
                }
            />

            <Heading size={700}>States</Heading>
            <Heading size={600}>Disabled</Heading>

            <Paragraph>
                Use <Code>isDisabled</Code> to show the avatar is disabled.
            </Paragraph>
            <Playground
                codeText={
                    `
<AvatarItem isDisabled avatar={<Avatar presence="online" />} />
`
                }
            />

            <Heading size={700}>Text</Heading>
            <Heading size={600}>Primary text</Heading>

            <Paragraph>
                Use <Code>primaryText</Code> to style the avatar text as primary text.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<AvatarItem primaryText="Jesko Iwanovski" avatar={<Avatar presence="online" />} />
`
                }
            />
            <Heading size={600}>Secondary text</Heading>

            <Paragraph>
                Use <Code>secondaryText</Code> to style the avatar text as secondary text.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<AvatarItem secondaryText="Jesko Iwanovski" avatar={<Avatar presence="online" />} />
`
                }
            />

            <Heading size={600}>Composing text</Heading>

            <Paragraph>
                <Code>primaryText</Code> and <Code>secondaryText</Code> can be composed together.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<AvatarItem primaryText="Jesko Iwanovski" secondaryText="knk Content Management Solutions" avatar={<Avatar presence="online" />} />
`
                }
            />
        </Layout>
    )
}