|
- import * as React from 'react';
- import { NextPage } from 'next';
- import { getFormValues } from '@theoryofnekomata/formxtra';
- import * as Freeform from '@tesseract-design/web-freeform-react';
- import * as Formatted from '@tesseract-design/web-formatted-react';
- import * as Action from '@tesseract-design/web-action-react';
- import {Refractor} from '@modal-sh/react-refractor';
-
- const RegistrationFormPage: NextPage = () => {
- const [values, setValues] = React.useState({} as Record<string, unknown>);
-
- const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
- e.preventDefault();
- const newValues = getFormValues(e.currentTarget);
- setValues(newValues);
- };
-
- const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
- e.preventDefault();
- const form = e.currentTarget.form;
- if (!form) {
- return;
- }
- const newValues = getFormValues(form);
- setValues(newValues);
- };
-
- 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 onSubmit={handleSubmit}>
- <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"
- onChange={handleChange}
- />
- </div>
- <div className="sm:col-span-2">
- <Freeform.TextInput
- block
- border
- label="Middle Name"
- name="middleName"
- onChange={handleChange}
- />
- </div>
- <div className="sm:col-span-2">
- <Freeform.TextInput
- block
- border
- label="Last Name"
- name="lastName"
- onChange={handleChange}
- />
- </div>
- <div className="sm:col-span-3">
- <Formatted.EmailInput
- block
- border
- label="Email"
- name="email"
- onChange={handleChange}
- />
- </div>
- <div className="sm:col-span-3">
- <Formatted.UrlInput
- block
- border
- label="Website"
- name="website"
- onChange={handleChange}
- />
- </div>
- <div className="sm:col-span-2">
- <Formatted.PhoneNumberInput
- country="PH"
- block
- border
- label="Phone"
- name="phone"
- onChange={handleChange}
- enhanced
- />
- </div>
- <div className="sm:col-span-2">
- <Freeform.MaskedTextInput
- block
- border
- label="Password"
- name="password"
- onChange={handleChange}
- enhanced
- />
- </div>
- <div className="sm:col-span-2">
- <Freeform.MaskedTextInput
- block
- border
- label="Confirm Password"
- name="confirmPassword"
- onChange={handleChange}
- enhanced
- />
- </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 className="mt-4">
- <Refractor
- language="json"
- code={JSON.stringify(values, null, 2)}
- />
- </div>
- </div>
- </main>
- )
- }
-
- export default RegistrationFormPage;
|