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;