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

import * as React from 'react';
import { NextPage } from 'next';
import * as TesseractNumber from '@tesseract-design/web-number-react';
import {Section, Subsection} from '@/components/Section';

const NumberPage: NextPage = () => {
  return (
    <main className="my-16 md:my-32">
      <Section title="NumberSpinner">
        <Subsection title="Default">
          <TesseractNumber.NumberSpinner
            min={-100}
            max={100}
            step="any"
            label="Step"
            border
            enhanced
            size="small"
          />
          <TesseractNumber.NumberSpinner
            min={-100}
            max={100}
            step="any"
            label="Step"
            border
            enhanced
          />
          <TesseractNumber.NumberSpinner
            min={-100}
            max={100}
            step="any"
            label="Step"
            border
            enhanced
            size="large"
          />
        </Subsection>
      </Section>
      <Section title="Slider">
        <Subsection title="Default">
          <TesseractNumber.Slider
            min={-100}
            max={100}
          />
        </Subsection>
        <Subsection title="Default (with tick marks)">
          <TesseractNumber.Slider
            min={-100}
            max={100}
          >
            <optgroup label="Test Values">
              <option value={-100}>
                Lowest
              </option>
              <option value={25}>
                日本語
              </option>
              <option value={50} />
              <option value={100}>
                Highest
              </option>
              <option value={200}>
                Out of bounds
              </option>
            </optgroup>
          </TesseractNumber.Slider>
        </Subsection>
        <Subsection title="Vertical">
          <TesseractNumber.Slider
            min={-100}
            max={100}
            orient="vertical"
          >
            <optgroup label="Test Values">
              <option value={-100}>
                Lowest
              </option>
              <option value={25}>
                日本語
              </option>
              <option value={50} />
              <option value={100}>
                Highest
              </option>
              <option value={200}>
                Out of bounds
              </option>
            </optgroup>
          </TesseractNumber.Slider>
          <TesseractNumber.Slider
            min={-100}
            max={100}
            orient="vertical"
          >
            <optgroup label="Test Values">
              <option value={-100}>
                Lowest
              </option>
              <option value={25}>
                日本語
              </option>
              <option value={50} />
              <option value={100}>
                Highest
              </option>
              <option value={200}>
                Out of bounds
              </option>
            </optgroup>
          </TesseractNumber.Slider>
          A
        </Subsection>
      </Section>
      <Section title="Matrix">
        <h2>
          Matrix
        </h2>
        <div>
          TODO
          <input type="range" />
          <input type="range" />
        </div>
      </Section>
    </main>
  )
}

export default NumberPage;