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

import {NextPage} from 'next';
import {DefaultLayout} from '@/components/DefaultLayout';
import {Section, Subsection} from '@/components/Section';
import * as Temporal from '@tesseract-design/web-temporal-react';
import * as TemporalWip from '@/components/temporal';

const TemporalPage: NextPage = () => {
  return (
    <DefaultLayout title="Temporal">
      <Section title="DateDropdown">
        <Subsection title="Default">
          <Temporal.DateDropdown
            label="Birthday"
            border
          />
        </Subsection>
      </Section>
      <Section title="TimeSpinner">
        <Subsection title="Default">
          <Temporal.TimeSpinner
            label="Time"
            variant="default"
            border
          />
        </Subsection>
        <Subsection title="Step">
          <Temporal.TimeSpinner
            label="Time"
            variant="default"
            border
            step="00:15:00"
          />
        </Subsection>
        <Subsection title="Step + Display Seconds">
          <Temporal.TimeSpinner
            label="Time"
            variant="default"
            border
            step="00:00:05"
            displaySeconds
          />
        </Subsection>
      </Section>
      <Section title="YearMonthInput">
        <Subsection title="Default">
          <TemporalWip.YearMonthInput
            label="Month"
            variant="default"
            border
          />
        </Subsection>
      </Section>
      <Section title="WeekInput">
        <Subsection title="Default">
          <TemporalWip.WeekInput
            label="Vacation"
            variant="default"
            border
          />
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default TemporalPage;