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

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

const FreeformPage: NextPage = () => {
  return (
    <DefaultLayout title="Freeform">
      <Section title="TextInput">
        <Subsection title="Default">
          <div className="grid md:grid-cols-2 gap-4 my-4">
            <div>
              <Freeform.TextInput
                size="small"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                size="small"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                size="large"
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                size="large"
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
          </div>
          <form>
            <fieldset className="contents">
              <legend className="sr-only">Fieldset Test</legend>
              <div className="grid grid-cols-6 gap-4 my-4">
                <div className="col-span-2">
                  <Freeform.TextInput
                    label="First Name"
                    block
                    border
                  />
                </div>
                <div className="col-span-2">
                  <Freeform.TextInput
                    label="Middle Name"
                    block
                    border
                  />
                </div>
                <div className="col-span-2">
                  <Freeform.TextInput
                    label="Last Name"
                    block
                    border
                  />
                </div>
                <div className="col-span-3">
                  <Freeform.TextInput
                    label="Username"
                    block
                    border
                  />
                </div>
                <div className="col-span-3">
                  <Freeform.TextInput
                    label="Title"
                    block
                    border
                    disabled
                  />
                </div>
              </div>
            </fieldset>
          </form>
          <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">
                  <Freeform.TextInput
                    label="First Name"
                    block
                    border
                  />
                </div>
                <div className="col-span-2">
                  <Freeform.TextInput
                    label="Middle Name"
                    block
                    border
                  />
                </div>
                <div className="col-span-2">
                  <Freeform.TextInput
                    label="Last Name"
                    block
                    border
                  />
                </div>
                <div className="col-span-3">
                  <Freeform.TextInput
                    label="Username"
                    block
                    border
                  />
                </div>
                <div className="col-span-3">
                  <Freeform.TextInput
                    label="Title"
                    block
                    border
                  />
                </div>
              </div>
            </fieldset>
          </form>
          <form>
            <div>
              Hi, my name is
              {' '}
              <Freeform.TextInput
                border
                label="Name"
                size="small"
              />
              {' '}
              but you can call me
              {' '}
              <Freeform.TextInput
                border
                label="Nickname"
                size="small"
              />
              .
            </div>
          </form>
        </Subsection>
        <Subsection title="Alternate">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Freeform.TextInput
                variant="alternate"
                size="small"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                variant="alternate"
                size="small"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                variant="alternate"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                variant="alternate"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                variant="alternate"
                size="large"
                label="TextInput ffgg"
                hint="Type anything here&hellip; ffgg"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.TextInput
                border
                block
                variant="alternate"
                size="large"
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
              />
            </div>
            <div>
              <Freeform.TextInput
                variant="alternate"
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
            <div>
              <Freeform.TextInput
                variant="alternate"
                border
                label="TextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
          </div>
        </Subsection>
      </Section>
      <Section title="MaskedTextInput">
        <Subsection title="Default">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Freeform.MaskedTextInput
                size="small"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                size="small"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                size="large"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                size="large"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
          </div>
        </Subsection>
        <Subsection title="Alternate">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Freeform.MaskedTextInput
                variant="alternate"
                size="small"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                variant="alternate"
                size="small"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                variant="alternate"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                variant="alternate"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                variant="alternate"
                size="large"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                border
                block
                variant="alternate"
                size="large"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                variant="alternate"
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
            <div>
              <Freeform.MaskedTextInput
                variant="alternate"
                border
                label="MaskedTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
          </div>
        </Subsection>
      </Section>
      <Section title="MultilineTextInput">
        <Subsection title="Default">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Freeform.MultilineTextInput
                size="small"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                size="small"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                size="large"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                size="large"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
          </div>
        </Subsection>
        <Subsection title="Alternate">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Freeform.MultilineTextInput
                variant="alternate"
                size="small"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                variant="alternate"
                size="small"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                variant="alternate"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                variant="alternate"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                variant="alternate"
                size="large"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                border
                block
                variant="alternate"
                size="large"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                variant="alternate"
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
            <div>
              <Freeform.MultilineTextInput
                variant="alternate"
                border
                label="MultilineTextInput"
                hint="Type anything here&hellip;"
                indicator="A"
                block
                disabled
              />
            </div>
          </div>
        </Subsection>
      </Section>
    </DefaultLayout>
  );
};

export default FreeformPage;