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

import { NextPage } from 'next';
import * as Choice from '@tesseract-design/web-choice-react';
import * as MultiChoice from '@tesseract-design/web-multichoice-react';
import { DefaultLayout } from '@/components/DefaultLayout';
import {ReactNode} from 'react';

type Props = {
  options: ReactNode,
}

const OptionPage: NextPage<Props> = ({
  options = (
    <>
      <optgroup label="Fruits">
        <option value="mango">Mango</option>
        <option value="strawberry">Strawberry</option>
        <option value="avocado">Avocado</option>
        <option value="grapes">Grapes</option>
      </optgroup>
      <optgroup label="Non-fruits">
        <option value="chocolate">Chocolate</option>
        <option value="milk">Milk</option>
        <option value="coffee">Coffee</option>
      </optgroup>
    </>
  )
}) => {
  return (
    <DefaultLayout
      title="Option"
    >
      <div className="mt-8 mb-16 md:mt-16 md:mb-32">
        <section>
          <div className="container mx-auto px-4">
            <h1>
              DropdownSelect
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Choice.DropdownSelect
                        size="small"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        size="small"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        size="large"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        size="large"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                  </div>
                  <form>
                    <fieldset
                      disabled
                      className="contents"
                    >
                      <legend className="sr-only">Disabled Test</legend>
                      <div className="grid grid-cols-6 gap-4 my-4">
                        <div className="col-span-2">
                          <Choice.DropdownSelect
                            label="First Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Choice.DropdownSelect
                            label="Middle Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Choice.DropdownSelect
                            label="Last Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Choice.DropdownSelect
                            label="Username"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Choice.DropdownSelect
                            label="Title"
                            block
                            border
                          />
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <form>
                    <div>
                      Hi, my name is
                      {' '}
                      <Choice.DropdownSelect
                        border
                        label="Name"
                        size="small"
                      />
                      {' '}
                      but you can call me
                      {' '}
                      <Choice.DropdownSelect
                        border
                        label="Nickname"
                        size="small"
                      />
                      .
                    </div>
                  </form>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Choice.DropdownSelect
                        variant="alternate"
                        size="small"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        variant="alternate"
                        size="small"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        variant="alternate"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        variant="alternate"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        variant="alternate"
                        size="large"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        border
                        block
                        variant="alternate"
                        size="large"
                        label="Select"
                        hint="Type anything here&hellip;"
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        variant="alternate"
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                    <div>
                      <Choice.DropdownSelect
                        variant="alternate"
                        border
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                      >
                        {options}
                      </Choice.DropdownSelect>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              MenuSelect
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Choice.MenuSelect
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Choice.MenuSelect
                        variant="alternate"
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        variant="alternate"
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        variant="alternate"
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        border
                        block
                        variant="alternate"
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                    <div>
                      <Choice.MenuSelect
                        variant="alternate"
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.MenuSelect>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>
                  Multiple
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <MultiChoice.MenuMultiSelect
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        border
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        border
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                    <div>
                      <MultiChoice.MenuMultiSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </MultiChoice.MenuMultiSelect>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              RadioButton
            </h1>
            <div>
              <section>
                <h2>Variants</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Choice.RadioButton
                        block
                        variant="bare"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        variant="filled"
                        block
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        variant="outline"
                        block
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        variant="filled"
                        block
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        disabled
                        name="RadioButton"
                        variant="bare"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        variant="filled"
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        variant="outline"
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        variant="filled"
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Sizes</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Choice.RadioButton
                        block
                        variant="outline"
                        size="small"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        variant="filled"
                        size="small"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        variant="outline"
                        size="medium"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        variant="filled"
                        size="medium"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        variant="outline"
                        size="large"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        variant="filled"
                        size="large"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Compact</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Choice.RadioButton
                        block
                        compact
                        variant="outline"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        compact
                        variant="filled"
                        name="RadioButton"
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        compact
                        variant="outline"
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        compact
                        variant="filled"
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        compact
                        variant="outline"
                        size="small"
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                    <div>
                      <Choice.RadioButton
                        block
                        compact
                        variant="filled"
                        size="small"
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Choice.RadioButton>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              RadioTickBox
            </h1>
            <div>
              <div className="grid gap-4 my-4">
                <div>
                  <Choice.RadioTickBox
                    block
                    subtext="Subtext"
                    name="RadioButton"
                  >
                    RadioButton
                  </Choice.RadioTickBox>
                </div>
              </div>
              <div className="grid gap-4 my-4">
                <div>
                  <Choice.RadioTickBox
                    block
                    subtext={
                      <>
                        <div>
                          This is a very long text that may span a couple of lines.
                        </div>
                        <div>
                          The subtext should not be included with the click area of the component.
                        </div>
                      </>
                    }
                    name="RadioButton"
                  >
                    RadioButton
                  </Choice.RadioTickBox>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ToggleButton
            </h1>
            <div>
              <section>
                <h2>Variants</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <MultiChoice.ToggleButton
                        variant="bare"
                        indeterminate
                        ref={(el) => { console.log(el); }}
                        block
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="filled"
                        block
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="outline"
                        block
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="filled"
                        block
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="bare"
                        block
                        disabled
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="filled"
                        block
                        disabled
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="outline"
                        block
                        disabled
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="filled"
                        block
                        disabled
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="outline"
                        block
                        indeterminate
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        variant="filled"
                        block
                        indeterminate
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Sizes</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        variant="outline"
                        size="small"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        variant="filled"
                        size="small"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        variant="outline"
                        size="medium"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        variant="filled"
                        size="medium"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        variant="outline"
                        size="large"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        variant="filled"
                        size="large"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Compact</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        compact
                        variant="outline"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        compact
                        variant="filled"
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        compact
                        variant="outline"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        compact
                        variant="filled"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        compact
                        variant="outline"
                        size="small"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                    <div>
                      <MultiChoice.ToggleButton
                        block
                        compact
                        variant="filled"
                        size="small"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </MultiChoice.ToggleButton>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ToggleSwitch
            </h1>
            <div>
              <section>
                <h2>Default</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <MultiChoice.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="Checkbox"
                      />
                    </div>
                    <div>
                      <MultiChoice.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="Checkbox"
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>With Unchecked Label</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <MultiChoice.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="On"
                        uncheckedLabel="Off"
                      />
                    </div>
                    <div>
                      <MultiChoice.ToggleSwitch
                        block
                        subtext="Subtext"
                        indeterminate
                        checkedLabel="On"
                        uncheckedLabel="Off"
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ToggleTickBox
            </h1>
            <div>
              <section>
                <h2>Default</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <MultiChoice.ToggleTickBox
                        block
                        subtext="Subtext"
                      >
                        Checkbox
                      </MultiChoice.ToggleTickBox>
                    </div>
                    <div>
                      <MultiChoice.ToggleTickBox
                        block
                        indeterminate
                        subtext="Subtext"
                      >
                        Checkbox
                      </MultiChoice.ToggleTickBox>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ComboBox
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Choice.ComboBox
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Choice.ComboBox
                        variant="alternate"
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        variant="alternate"
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        variant="alternate"
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        border
                        block
                        variant="alternate"
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                    <div>
                      <Choice.ComboBox
                        variant="alternate"
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      >
                        {options}
                      </Choice.ComboBox>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              TagInput
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <MultiChoice.TagInput
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        size="large"
                        label="not enhanced"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        onFocus={(e) => {
                          console.log('focus', e.currentTarget);
                        }}
                        onBlur={(e) => {
                          console.log('blur', e.currentTarget);
                        }}
                        onChange={(e) => {
                          console.log('change', e.currentTarget.value);
                        }}
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        size="large"
                        label="change"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                        separator={['newline', 'comma']}
                        onFocus={(e) => {
                          console.log('focus', e.currentTarget);
                        }}
                        onBlur={(e) => {
                          console.log('blur', e.currentTarget);
                        }}
                        onChange={(e) => {
                          console.log('change', e.currentTarget.value);
                        }}
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        enhanced
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <MultiChoice.TagInput
                        variant="alternate"
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        variant="alternate"
                        size="small"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        variant="alternate"
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        border
                        block
                        variant="alternate"
                        size="large"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        variant="alternate"
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        enhanced
                      />
                    </div>
                    <div>
                      <MultiChoice.TagInput
                        variant="alternate"
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        enhanced
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
      </div>
    </DefaultLayout>
  );
};

export default OptionPage;