|
- import { NextPage } from 'next';
- import { TextControlSize, TextControlStyle } from '@tesseract-design/web-base-textcontrol';
- import * as Option from '@tesseract-design/web-option-react';
- import { CheckControlAppearance } from '@tesseract-design/web-base-checkcontrol';
- import { ButtonSize, ButtonVariant } from '@tesseract-design/web-base-button';
-
- type Props = {
- options: Option.SelectOption[],
- }
-
- const OptionPage: NextPage<Props> = ({
- options = [
- {
- label: 'Fruits',
- children: [
- {
- label: 'Mango',
- value: 'mango',
- },
- {
- label: 'Strawberry',
- value: 'strawberry',
- },
- {
- label: 'Avocado',
- value: 'avocado',
- },
- {
- label: 'Grapes',
- value: 'grapes',
- },
- ],
- },
- {
- label: 'Non-fruits',
- children: [
- {
- label: 'Chocolate',
- value: 'chocolate',
- },
- {
- label: 'Milk',
- value: 'milk',
- },
- {
- label: 'Coffee',
- value: 'coffee',
- }
- ],
- },
- ],
- }) => {
- return (
- <main className="my-16 md:my-32">
- <section>
- <div className="container mx-auto px-4">
- <h1>
- Option
- </h1>
- <div>
- <section>
- <h2>
- DropdownSelect
- </h2>
- <div>
- <section>
- <h3>
- Default
- </h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.DropdownSelect
- size={TextControlSize.SMALL}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- size={TextControlSize.SMALL}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- size={TextControlSize.LARGE}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- size={TextControlSize.LARGE}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- label="Select"
- hint="Type anything here…"
- block
- disabled
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- label="Select"
- hint="Type anything here…"
- block
- disabled
- options={options}
- />
- </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">
- <Option.DropdownSelect
- label="First Name"
- block
- border
- />
- </div>
- <div className="col-span-2">
- <Option.DropdownSelect
- label="Middle Name"
- block
- border
- />
- </div>
- <div className="col-span-2">
- <Option.DropdownSelect
- label="Last Name"
- block
- border
- />
- </div>
- <div className="col-span-3">
- <Option.DropdownSelect
- label="Username"
- block
- border
- />
- </div>
- <div className="col-span-3">
- <Option.DropdownSelect
- label="Title"
- block
- border
- />
- </div>
- </div>
- </fieldset>
- </form>
- <form>
- <div>
- Hi, my name is
- {' '}
- <Option.DropdownSelect
- border
- label="Name"
- size={TextControlSize.SMALL}
- />
- {' '}
- but you can call me
- {' '}
- <Option.DropdownSelect
- border
- label="Nickname"
- size={TextControlSize.SMALL}
- />
- .
- </div>
- </form>
- </div>
- </section>
- <section>
- <h3>Alternate</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Option.DropdownSelect
- style={TextControlStyle.ALTERNATE}
- size={TextControlSize.SMALL}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- style={TextControlStyle.ALTERNATE}
- size={TextControlSize.SMALL}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- style={TextControlStyle.ALTERNATE}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- style={TextControlStyle.ALTERNATE}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- style={TextControlStyle.ALTERNATE}
- size={TextControlSize.LARGE}
- label="Select"
- hint="Type anything here…"
- block
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- border
- block
- style={TextControlStyle.ALTERNATE}
- size={TextControlSize.LARGE}
- label="Select"
- hint="Type anything here…"
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- style={TextControlStyle.ALTERNATE}
- label="Select"
- hint="Type anything here…"
- block
- disabled
- options={options}
- />
- </div>
- <div>
- <Option.DropdownSelect
- style={TextControlStyle.ALTERNATE}
- border
- label="Select"
- hint="Type anything here…"
- block
- disabled
- options={options}
- />
- </div>
- </div>
- </div>
- </section>
- </div>
- </section>
- <section>
- <h2>
- RadioButton
- </h2>
- <div>
- <section>
- <h3>Default</h3>
- <div>
- <div className="grid gap-4 my-4">
- <div>
- <Option.RadioButton
- block
- subtext="Subtext"
- name="RadioButton"
- >
- RadioButton
- </Option.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Switch</h3>
- <div>
- <div className="grid gap-4 my-4">
- <div>
- <Option.RadioButton
- block
- subtext="Subtext"
- name="RadioButton"
- appearance={CheckControlAppearance.SWITCH}
- >
- RadioButton
- </Option.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Button</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.RadioButton
- block
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- variant={ButtonVariant.FILLED}
- block
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- border
- block
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- border
- variant={ButtonVariant.FILLED}
- block
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- variant={ButtonVariant.FILLED}
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- border
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- border
- variant={ButtonVariant.FILLED}
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Sizes</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.RadioButton
- block
- border
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- border
- size={ButtonSize.MEDIUM}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.MEDIUM}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- border
- size={ButtonSize.LARGE}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.LARGE}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Compact</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.RadioButton
- block
- compact
- border
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- compact
- border
- variant={ButtonVariant.FILLED}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- compact
- border
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- compact
- border
- variant={ButtonVariant.FILLED}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- compact
- border
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.RadioButton>
- </div>
- <div>
- <Option.RadioButton
- block
- compact
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.RadioButton>
- </div>
- </div>
- </div>
- </section>
- </div>
- </section>
- <section>
- <h2>
- Checkbox
- </h2>
- <div>
- <section>
- <h3>Default</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.ToggleTickBox
- block
- subtext="Subtext"
- >
- Checkbox
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- indeterminate
- subtext="Subtext"
- >
- Checkbox
- </Option.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Switch</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.ToggleTickBox
- block
- subtext="Subtext"
- appearance={CheckControlAppearance.SWITCH}
- >
- Checkbox
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- indeterminate
- subtext="Subtext"
- appearance={CheckControlAppearance.SWITCH}
- >
- Checkbox
- </Option.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Button</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.ToggleTickBox
- block
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- variant={ButtonVariant.FILLED}
- block
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- border
- block
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- border
- variant={ButtonVariant.FILLED}
- block
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- variant={ButtonVariant.FILLED}
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- border
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- border
- variant={ButtonVariant.FILLED}
- block
- disabled
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- border
- block
- appearance={CheckControlAppearance.BUTTON}
- indeterminate
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- border
- variant={ButtonVariant.FILLED}
- block
- appearance={CheckControlAppearance.BUTTON}
- indeterminate
- >
- Button
- </Option.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Sizes</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.ToggleTickBox
- block
- border
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- border
- size={ButtonSize.MEDIUM}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.MEDIUM}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- border
- size={ButtonSize.LARGE}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.LARGE}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h3>Compact</h3>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Option.ToggleTickBox
- block
- compact
- border
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- compact
- border
- variant={ButtonVariant.FILLED}
- appearance={CheckControlAppearance.BUTTON}
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- compact
- border
- appearance={CheckControlAppearance.BUTTON}
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- compact
- border
- variant={ButtonVariant.FILLED}
- appearance={CheckControlAppearance.BUTTON}
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- compact
- border
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.ToggleTickBox>
- </div>
- <div>
- <Option.ToggleTickBox
- block
- compact
- border
- variant={ButtonVariant.FILLED}
- size={ButtonSize.SMALL}
- appearance={CheckControlAppearance.BUTTON}
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Option.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- </div>
- </section>
- <section>
- <h2>
- TagList
- </h2>
- <div>
- TODO
- </div>
- </section>
- <section>
- <h2>
- ComboBox
- </h2>
- <div>
- TODO input with datalist
- </div>
- </section>
- </div>
- </div>
- </section>
- </main>
- )
- }
-
- export default OptionPage
|