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.
 
 
 
robotop.krasnikov.pro/.history/pages/registration_20220613144404...

257 lines
12 KiB

import React from 'react';
import Layout from '../components/Layout';
export const Registration = (): JSX.Element => {
return (
<Layout
customMeta={{
title: 'О нас',
}}
>
<h1>РоботТоп</h1>
<div className="mt-10 sm:mt-0">
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
<div className="px-4 sm:px-0">
<h3 className="text-lg font-medium leading-6">Регистрация команды</h3>
<p className="mt-1 text-sm">Введите актуальные данные команды</p>
</div>
</div>
<div className="mt-5 md:mt-0 md:col-span-2">
<form action="/api/registration" method="POST">
<div className="shadow overflow-hidden sm:rounded-md">
<div className="px-4 py-5 bg-white sm:p-6">
<div className="grid grid-cols-6 gap-6">
<div className="col-span-6 sm:col-span-3">
<label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
ФИО тренера команды
</label>
<input
type="text"
name="name_team_coach"
id="first-name"
placeholder="Иванов Иван Иванович"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="last-name" className="block text-sm font-medium text-gray-700">
Номер теленона тренера
</label>
<input
type="text"
name="coach_telenon_number"
id="last-name"
placeholder="+79181234567"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="email-address" className="block text-sm font-medium text-gray-700">
Email тренера
</label>
<input
type="text"
name="trainer_mail"
id="email-address"
placeholder="you@example.com"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="email-address" className="block text-sm font-medium text-gray-700">
Город команда
</label>
<input
type="text"
name="city_team"
id="email-address"
placeholder="Краснодар"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-3">
<label htmlFor="street-address" className="block text-sm font-medium text-gray-700">
Учебное заведение команды
</label>
<input
type="text"
name="training_institution_team"
id="street-address"
placeholder="МАОУ СОШ 103"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-3">
<label htmlFor="region" className="block text-sm font-medium text-gray-700">
Название команды
</label>
<input
type="text"
name="team_name"
id="region"
placeholder="Фиксики"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="city" className="block text-sm font-medium text-gray-700">
ФИО первого участника
</label>
<input
type="text"
name="name_first_participant"
id="city"
placeholder="Иванов Иван Иванович / нет"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="country" className="block text-sm font-medium text-gray-700">
Класс участника
</label>
<select
id="country"
name="first_partial_class"
autoComplete="country-name"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="city" className="block text-sm font-medium text-gray-700">
ФИО второго участника
</label>
<input
type="text"
name="name_second_participant"
id="city"
placeholder="Иванов Петрт Иванович / нет"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="country" className="block text-sm font-medium text-gray-700">
Класс участника
</label>
<select
id="country"
name="second_class"
autoComplete="country-name"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="city" className="block text-sm font-medium text-gray-700">
ФИО третьего участника
</label>
<input
type="text"
name="name_third_party"
id="city"
placeholder="Иванов Дмитрий Иванович / нет"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label htmlFor="country" className="block text-sm font-medium text-gray-700">
Класс участника
</label>
<select
id="country"
name="third_part_class"
autoComplete="country-name"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
</div>
</div>
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Зарегистрировать команду
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<table className="border-collapse border border-slate-400 ...">
<thead>
<tr>
<th className="border border-slate-300 ...">State</th>
<th className="border border-slate-300 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-slate-300 ...">Indiana</td>
<td className="border border-slate-300 ...">Indianapolis</td>
</tr>
<tr>
<td className="border border-slate-300 ...">Ohio</td>
<td className="border border-slate-300 ...">Columbus</td>
</tr>
<tr>
<td className="border border-slate-300 ...">Michigan</td>
<td className="border border-slate-300 ...">Detroit</td>
</tr>
</tbody>
</table>
</Layout>
);
};
export default Registration;