import {NextPage} from 'next';
import {DefaultLayout} from '@/components/DefaultLayout';
import {Section, Subsection} from '@/components/Section';
import * as Color from '@tesseract-design/web-color-react';

const ColorPage: NextPage = () => {
  return (
    <DefaultLayout title="Color">
      <Section title="ColorPicker">
        <Subsection title="Default">
          <Color.ColorPicker
            size="small"
            defaultValue="#ff0000"
          />
          <Color.ColorPicker
            size="medium"
            defaultValue="#00ff00"
          />
          <Color.ColorPicker
            size="large"
            defaultValue="#0000ff"
          />
        </Subsection>
        <Subsection title="Square">
          <Color.ColorPicker
            size="small"
            square
            defaultValue="#ff0000"
          />
          <Color.ColorPicker
            size="medium"
            square
            defaultValue="#00ff00"
          />
          <Color.ColorPicker
            size="large"
            square
            defaultValue="#0000ff"
          />
        </Subsection>
        <Subsection title="Disabled">
          <Color.ColorPicker
            size="small"
            defaultValue="#ff0000"
            disabled
          />
          <Color.ColorPicker
            size="medium"
            defaultValue="#00ff00"
            disabled
          />
          <Color.ColorPicker
            size="large"
            defaultValue="#0000ff"
            disabled
          />
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default ColorPage;
