|
- 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… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- size="small"
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- size="large"
- label="TextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- size="large"
- label="TextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- label="TextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- label="TextInput"
- hint="Type anything here…"
- 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… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- variant="alternate"
- size="small"
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- variant="alternate"
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- variant="alternate"
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- variant="alternate"
- size="large"
- label="TextInput ffgg"
- hint="Type anything here… ffgg"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.TextInput
- border
- block
- variant="alternate"
- size="large"
- label="TextInput"
- hint="Type anything here…"
- indicator="A"
- />
- </div>
- <div>
- <Freeform.TextInput
- variant="alternate"
- label="TextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- />
- </div>
- <div>
- <Freeform.TextInput
- variant="alternate"
- border
- label="TextInput"
- hint="Type anything here…"
- 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…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- size="small"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- size="large"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- size="large"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- disabled
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- label="MaskedTextInput"
- hint="Type anything here…"
- 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…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- variant="alternate"
- size="small"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- variant="alternate"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- variant="alternate"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- variant="alternate"
- size="large"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- border
- block
- variant="alternate"
- size="large"
- label="MaskedTextInput"
- hint="Type anything here…"
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- variant="alternate"
- label="MaskedTextInput"
- hint="Type anything here…"
- block
- disabled
- />
- </div>
- <div>
- <Freeform.MaskedTextInput
- variant="alternate"
- border
- label="MaskedTextInput"
- hint="Type anything here…"
- 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…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- 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…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- />
- </div>
- <div>
- <Freeform.MultilineTextInput
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- />
- </div>
- </div>
- </Subsection>
- </Section>
- </DefaultLayout>
- );
- };
-
- export default FreeformPage;
|