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

import {NextPage} from 'next';
import {DefaultLayout} from '@/components/DefaultLayout';
import {Section, Subsection} from '@/components/Section';
import * as Formatted from '@tesseract-design/web-formatted-react';
import {useRef} from 'react';
import {ActionButton} from '@tesseract-design/web-action-react';

const TemporalPage: NextPage = () => {
  const phoneNumberRef = useRef<HTMLInputElement>(null);
  return (
    <DefaultLayout title="Formatted">
      <Section title="PhoneNumberInput">
        <Subsection title="Default">
          <Formatted.PhoneNumberInput
            country="PH"
            label="Phone"
            name="phone"
            enhanced
            border
            onFocus={(e) => { console.log('focus', e.currentTarget)}}
            onBlur={(e) => { console.log('blur', e.currentTarget)}}
            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
          />
        </Subsection>
        <Subsection title="Non-enhanced">
          <Formatted.PhoneNumberInput
            country="PH"
            label="Phone"
            name="phone"
            border
            onFocus={(e) => { console.log('focus', e.currentTarget)}}
            onBlur={(e) => { console.log('blur', e.currentTarget)}}
            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
          />
        </Subsection>
        <Subsection title="With Default Value">
          <Formatted.PhoneNumberInput
            country="PH"
            label="Phone"
            name="phone2"
            enhanced
            border
            defaultValue="+639876543210"
          />
        </Subsection>
        <Subsection title="With Ref">
          <div className="flex gap-4 flex-wrap">
            <div>
              <Formatted.PhoneNumberInput
                country="PH"
                label="Phone"
                name="phone3"
                enhanced
                border
                ref={phoneNumberRef}
                onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
              />
            </div>
            <div>
              <ActionButton
                onClick={() => {
                  if (phoneNumberRef.current) {
                    phoneNumberRef.current.value = '+639123456789';
                  }
                }}
              >
                Set Value
              </ActionButton>
            </div>
            <div>
              <ActionButton
                onClick={() => {
                  if (phoneNumberRef.current) {
                    phoneNumberRef.current.value = '+63465123456';
                  }
                }}
              >
                Set Other Value
              </ActionButton>
            </div>
            <div>
              <ActionButton
                onClick={() => {
                  if (phoneNumberRef.current) {
                    phoneNumberRef.current.value = '+63288888888';
                  }
                }}
              >
                Set Yet Other Value
              </ActionButton>
            </div>
          </div>
        </Subsection>
      </Section>
      <Section title="EmailInput">
        <Subsection title="Default">
          <Formatted.EmailInput
            label="Email"
            name="email"
            border
          />
        </Subsection>
        <Subsection title="With domains">
          <Formatted.EmailInput
            label="Email"
            name="email"
            border
            variant="alternate"
            domains={['gmail.com', 'yahoo.com']}
            hint="Only GMail or Yahoo Mail allowed"
            length={50}
          />
        </Subsection>
      </Section>
      <Section title="UrlInput">
        <Subsection title="Default">
          <Formatted.UrlInput
            label="Website"
            name="website"
            border
          />
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default TemporalPage;