You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
- import { NextPage } from 'next';
- import * as Freeform from '@tesseract-design/web-freeform-react';
- import * as Action from '@tesseract-design/web-action-react';
-
- const RegistrationFormPage: NextPage = () => {
- return (
- <main className="my-16 md:my-32">
- <div className="container mx-auto px-4">
- <h1>
- Registration Form
- </h1>
- <p>
- Input your data in order to gain access to the functions of this service.
- </p>
- <form>
- <fieldset className="contents">
- <legend className="sr-only">
- Register
- </legend>
- <div className="grid sm:grid-cols-6 gap-4">
- <div className="sm:col-span-2">
- <Freeform.TextInput
- block
- border
- label="First Name"
- name="firstName"
- />
- </div>
- <div className="sm:col-span-2">
- <Freeform.TextInput
- block
- border
- label="Middle Name"
- name="middleName"
- />
- </div>
- <div className="sm:col-span-2">
- <Freeform.TextInput
- block
- border
- label="Last Name"
- name="lastName"
- />
- </div>
- <div className="sm:col-span-3">
- <Freeform.TextInput
- block
- border
- label="Email"
- name="email"
- />
- </div>
- <div className="sm:col-span-3">
- <Freeform.TextInput
- block
- border
- label="Website"
- name="website"
- />
- </div>
- <div className="sm:col-span-6 text-center">
- <div
- className="sm:flex items-center justify-end space-y-4 sm:space-y-0 sm:space-x-4"
- >
- <small>
- By registering, you agree to the <a href="#">Terms</a> of this service.
- </small>
- {' '}
- <div>
- <Action.ActionButton
- variant="filled"
- block
- type="submit"
- menuItem
- subtext="Registration requires activation"
- >
- Submit
- </Action.ActionButton>
- </div>
- </div>
- </div>
- </div>
- </fieldset>
- </form>
- </div>
- </main>
- )
- }
-
- export default RegistrationFormPage;
|