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

export default function Select() {
    return (
        <Layout
            title="Select"
            showHero
            description="A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support."
            sidebar={ComponentsSidebar}
        >
            <Paragraph>
                The Select component wraps <Code>ReactSelect</Code>. You can find the Documentation <Link href="https://react-select.com/home" target="_blank">here</Link>.
            </Paragraph>
            <Heading size={800}>Single select</Heading>
            <Paragraph>
                Allows the user to select a single item from a dropdown menu.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<Select
     placeholder="Choose a City"
     options={[
      { label: 'Adelaide', value: 'adelaide' },
      { label: 'Brisbane', value: 'brisbane' },
      { label: 'Canberra', value: 'canberra' },
      { label: 'Darwin', value: 'darwin' },
      { label: 'Hobart', value: 'hobart' },
      { label: 'Melbourne', value: 'melbourne' },
      { label: 'Perth', value: 'perth' },
      { label: 'Sydney', value: 'sydney' },
    ]}
/>
`}
            />

            <Heading size={800}>Multi select</Heading>
            <Paragraph>
                Allows the user to select a multiple items from a dropdown menu.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<Select
     placeholder="Choose a City"
     isMulti
     options={[
      { label: 'Adelaide', value: 'adelaide' },
      { label: 'Brisbane', value: 'brisbane' },
      { label: 'Canberra', value: 'canberra' },
      { label: 'Darwin', value: 'darwin' },
      { label: 'Hobart', value: 'hobart' },
      { label: 'Melbourne', value: 'melbourne' },
      { label: 'Perth', value: 'perth' },
      { label: 'Sydney', value: 'sydney' },
    ]}
/>
`}
            />
        </Layout>
    )
}