tesseract/showcases/web-kitchensink-reactnext/src/pages/categories/color/index.tsx

import {NextPage} from 'next';
import {DefaultLayout} from '@/components/DefaultLayout';
import {Section, Subsection} from '@/components/Section';
import * as Color from '@tesseract-design/web-color-react';
import { TextInput } from '@tesseract-design/web-freeform-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>
        <Subsection title="Copy on select">
          <Color.ColorPicker
            size="small"
            defaultValue="#ff0000"
            copyOnSelect
            readOnly
          />
          <Color.ColorPicker
            size="medium"
            defaultValue="#00ff00"
            copyOnSelect
            readOnly
          />
          <Color.ColorPicker
            size="large"
            defaultValue="#0000ff"
            copyOnSelect
            readOnly
          />
          <div>
            <TextInput
              label="Color"
              border
            />
          </div>
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default ColorPage;