|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601 |
- 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;
|