Самодокументация Hire +Plus: V1 (4)


Что я освещаю

  • Обновления в проекте
  • Навигационный компонент
  • Компонент входа
  • Компонент регистрации
  • Страница авторизации

Обновление: Я перенес маршрутизацию в файл App.tsx. Теперь файл index.tsx просто рендерит приложение.

Текущий файл App.tsx

import { Routes, Route } from 'react-router-dom';
import Launch from './components/launch/launch.component';
import Navigation from './components/navigation/navigation.component';
import AuthPage from './routes/auth/auth-page';

function App() {
    return (
        <>
            <Navigation />
            <Routes>
                <Route path="/" element={<Launch />} />
                <Route path="auth/:userSelect" element={<AuthPage />} />
            </Routes>
        </>
    );
}

export default App;
Вход в полноэкранный режим Выйти из полноэкранного режима

Страница launch находится на маршруте "/", страница auth будет динамической (отсюда "/*"). В итоге, это будет либо "/auth/employers", либо "/auth/employees" в зависимости от того, что пользователь выберет на странице launch.

Я добавил компонент навигации, содержащий только логотип, который перенаправляет обратно на страницу запуска.

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation: React.FunctionComponent = () => {
    return (
        <header className="logo h-16 sticky top-0 z-10">
            <Link to="/">
                Hire <span style={{ color: '#f7578c' }}>+Plus</span>
            </Link>
        </header>
    );
};
export default Navigation;
Вход в полноэкранный режим Выход из полноэкранного режима

Компонент входа в систему

Я удалил использование стилизованных компонентов и добавил стили tailwind.
(см. исходный код компонента входа в систему)

У меня были некоторые проблемы с рендерингом иконки google в typescript. Оказалось, что мне нужно было настроить его на typescript.

Добавьте файл index.d.ts в корневой каталог. Затем добавил следующее

declare module '*.png';
declare module '*.jpg';
Вход в полноэкранный режим Выйти из полноэкранного режима

Внутри tsconfig.json я добавил этот файл в массив include

"include": ["src", "index.d.ts"]
Ввести полноэкранный режим Выход из полноэкранного режима

Я добавил папку assets для моих изображений/иконок

Компонент регистрации

Я создал папку и компонент для страницы регистрации, используя typescript.
(Посмотреть исходный код компонента регистрации)

Страница авторизации

Страница auth отображает оба компонента sign-in и sign-up бок о бок. В зависимости от того, что выберет пользователь (работодатель или сотрудник), я буду обрабатывать отправку формы соответствующим образом. (В данном случае это параметры userSelect, которые вы видите здесь).

import SignIn from '../../components/sign-in/sign-in.component';
import { useParams } from 'react-router-dom';
import Signup from '../../components/sign-up/sign-up.component';

const AuthPage: React.FunctionComponent = () => {
    const { userSelect } = useParams();
    console.log(userSelect);
    return (
        <section className="text-gray-600 body-font">
            <div className="container flex flex-wrap px-5 py-10 mx-auto items-center justify-center">
                <div className="md:w-1/2 md:pr-5 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-200">
                    <SignIn />
                </div>
                <div className="flex flex-col md:w-1/2">
                    <Signup />
                </div>
            </div>
        </section>
    );
};

export default AuthPage;
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, вот как выглядит страница launch на данный момент

Вот как выглядит страница auth.

На этом пока все, следите за тестированием этих компонентов!

Оцените статью
Procodings.ru
Добавить комментарий