import Layout from '../../components/Layout'
import { Playground } from '../../components/Playground'
import { ComponentsSidebar } from '../../sidebars'


export default function Spinner() {
    return (
        <Layout
            title="Spinner"
            showHero
            description="A spinner is an animated spinning icon used to indicate a loading state."
            sidebar={ComponentsSidebar}
        >
            <h2>Basic example</h2>
            <Playground
                codeText={`// import { Spinner } from '@knkui/spinner';

<Spinner />`}
            />

            <h2>Sizes</h2>
            <ul className="list">
                <li><strong>Extra small:</strong> Use inside toggles</li>
                <li><strong>Small:</strong> Use within elements such as buttons or form fields, or when there are other space constraints.</li>
                <li><strong>Medium:</strong> The default size which is used for most use cases</li>
                <li><strong>Large:</strong> Larger than medium</li>
                <li><strong>Extra large:</strong> Larger than large</li>
            </ul>
            <Playground
                isOpenByDefault={false}
                codeText={`
                <div style={{ display: 'flex', flexWrap: 'wrap'}}>
                    {['xsmall', 'small', 'medium', 'large', 'xlarge', 80].map(size => (
                        <div
                            key={size}
                            style={{
                                display: 'flex',
                                flexDirection: 'column',
                                marginLeft: 8,
                                marginRight: 8,
                                alignItems: 'center',
                                justifyContent: 'flex-end'
                            }}
                        >
                            <span>
                                <Spinner size={size} />
                            </span>
                            {typeof size === 'number' ? (
                                <span>custom</span>
                            ) : (
                                <span>{size}</span>
                            )}
                        </div>
                    ))}
                </div>`}
            />
        </Layout>
    )
}