feat: add routing

Author: Deolys

eslint.config.js

@@ -21,6 +21,7 @@ export default tseslint.config({
     'react-hooks': reactHooks,
     'react-refresh': reactRefresh,
     'react-compiler': reactCompiler,
+    ...eslintConfigPrettier.plugins,
     prettier: eslintPluginPrettier,
   },
   rules: {
@@ -45,6 +46,7 @@ export default tseslint.config({
         allowExpressions: true,
       },
     ],
+    ...eslintConfigPrettier.rules,
   },
   settings: {
     react: {

package-lock.json

@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
@@ -36,6 +37,7 @@
     "prettier": "3.3.3",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.0",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

package.json

@@ -0,0 +1,27 @@
+.headerWrapper {
+  max-width: 1600px;
+  width: 100%;
+  padding: 16px clamp(2.188rem, 1.027rem + 5.8vw, 6.25rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #3d5a80;
+  color: white;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
+}
+
+.navPanel {
+  display: flex;
+  gap: 12px;
+  a.active {
+    color: #00ffe5;
+    border-bottom: 2px solid #00ffe5;
+  }
+}
+

src/App.tsx

@@ -0,0 +1,31 @@
+import type { JSX } from 'react';
+import styles from './header.module.css';
+import { NavLink } from 'react-router-dom';
+
+export function Header(): JSX.Element {
+  return (
+    <header className={styles.header}>
+      <div className={styles.headerWrapper}>
+        <nav className={styles.navPanel}>
+          <NavLink
+            className={({ isActive }) => (isActive ? `${styles['active']}` : '')}
+            to="/uncontrolled-form"
+          >
+            Uncontrolled form
+          </NavLink>
+          <NavLink className={({ isActive }) => (isActive ? `${styles['active']}` : '')} to="/">
+            Main
+          </NavLink>
+          <NavLink
+            className={({ isActive }) => (isActive ? `${styles['active']}` : '')}
+            to="/controlled-form"
+          >
+            Controlled form
+          </NavLink>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

src/components/header/header.module.css

@@ -0,0 +1 @@
+export { Header } from './header';

src/components/header/header.tsx

@@ -1,75 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..900&display=swap');
+
 #root {
-  max-width: 1280px;
+  max-width: 1600px;
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
 }
 
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+html {
+  box-sizing: border-box;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+*,
+*:after,
+*:before {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  font-family: 'Montserrat', sans-serif;
+  background-color: #98c1d9;
+  color: #293241;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+img,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+svg {
+  max-height: 100%;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
+  padding: 0;
   cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
+  border: none;
+  background-color: transparent;
+  color: inherit;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+a {
+  text-decoration: none;
+  color: inherit;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
+
+h1,
+h2,
+h3,
+p,
+figure {
+  margin: 0;
+}

src/components/header/index.ts

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.tsx';
 import './index.css';
+import { PageRoutes } from './routes';
+import { BrowserRouter } from 'react-router-dom';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <PageRoutes />
+    </BrowserRouter>
   </StrictMode>,
 );

src/index.css

@@ -0,0 +1 @@
+export { MainPage } from './main-page';

src/main.tsx

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import { Header } from '@/components/header';
+
+export function MainPage(): JSX.Element {
+  return <Header />;
+}
+
+export default MainPage;

src/pages/main-page/index.ts

@@ -0,0 +1 @@
+export { UncontrolledFormPage } from './uncontrolled-form-page';