Site by GTXtab

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: [
     '@mate-academy/eslint-config-react-typescript',
     'plugin:cypress/recommended',
+    "prettier",
   ],
   rules: {},
 };

.prettierrc

@@ -4,8 +4,23 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "jsxSingleQuote": false,
-  "printWidth": 80,
+  "printWidth": 100,
   "semi": true,
   "bracketSpacing": true,
-  "bracketSameLine": false
+  "bracketSameLine": false,
+
+  "files.autoSave": "afterDelay",
+  "files.autoSaveDelay": 500,
+  "editor.fontSize": 15,
+  "editor.tabSize": 2,
+  "editor.renderWhitespace": "boundary",
+  "editor.detectIndentation": false,
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always",
+    "source.fixAll.eslint": "always"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnType": true,
+  "editor.formatOnSave": true
 }

package.json

@@ -13,31 +13,36 @@
     "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@mate-academy/eslint-config-react-typescript": "latest",
-    "@mate-academy/scripts": "^1.7.9",
+    "@mate-academy/scripts": "^1.9.3",
     "@mate-academy/students-ts-config": "latest",
     "@mate-academy/stylelint-config": "latest",
     "@types/node": "^16.18.80",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "cypress": "^12.17.4",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-prettier": "^5.2.1",
     "gh-pages": "^6.1.1",
+    "husky": "^9.1.4",
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
     "postcss": "^8.4.12",
-    "prettier": "^3.2.5",
-    "sass": "^1.72.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.1",
     "stylelint": "^15.11.0",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "webpack": "^5.93.0"
   },
   "scripts": {
     "start": "mate-scripts start -l",
@@ -72,5 +77,20 @@
       "_comment": "Add `cypressComponents: true` to enable component tests",
       "cypress": true
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.tsx": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   }
 }

src/App.scss

@@ -1 +1,8 @@
-// not empty
+@import '/src/styles/fonts/fonts';
+@import './styles/typography';
+@import './styles/utils';
+
+* {
+  font-family: $f-main;
+  box-sizing: border-box;
+}

src/App.tsx

@@ -1,7 +1,10 @@
 import './App.scss';
+import { Header } from './components/Header/Header';
 
 export const App = () => (
   <div className="App">
-    <h1>Product Catalog</h1>
+    <div className="container">
+      <Header />
+    </div>
   </div>
 );

src/components/Header/Header.scss

@@ -0,0 +1,19 @@
+.header {
+  display: flex;
+
+  &__logo {
+    width: 64px;
+    height: 22px;
+  }
+}
+
+.nav-bar {
+  display: flex;
+  gap: 10px;
+  &__link {
+    color: black;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-size: 12px;
+  }
+}

src/components/Header/Header.tsx

@@ -0,0 +1,27 @@
+import { Link, NavLink } from 'react-router-dom';
+import './Header.scss';
+
+export const Header: React.FC = () => {
+  return (
+    <header className="header">
+      <Link to="/">
+        <img src="./img/icons/Logo.png" alt="Nice gadgets" className="header__logo" />
+      </Link>
+      <nav className="nav-bar">
+        <NavLink to="/home" className="nav-bar__link">
+          Home
+        </NavLink>
+        <NavLink to="/home" className="nav-bar__link">
+          Phones
+        </NavLink>
+        <NavLink to="/home" className="nav-bar__link">
+          tablets
+        </NavLink>
+        <NavLink to="/home" className="nav-bar__link">
+          accessories
+        </NavLink>
+      </nav>
+      <h1>HELLO</h1>
+    </header>
+  );
+};

src/index.tsx

@@ -1,4 +1,17 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { PageNotFound } from './pages/PageNotFound';
+import { HomePage } from './pages/HomePage';
 
-createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <HashRouter>
+    <Routes>
+      <Route path="/" element={<App />}>
+        <Route path="/home" element={<Navigate to="/" />} />
+        <Route index element={<HomePage />} />
+        <Route path="*" element={<PageNotFound />} />
+      </Route>
+    </Routes>
+  </HashRouter>,
+);

src/pages/HomePage.tsx

@@ -0,0 +1,3 @@
+export const HomePage: React.FC = () => {
+  return <h1 className="title">Hello world</h1>;
+};

src/pages/PageNotFound.tsx

@@ -0,0 +1,3 @@
+export const PageNotFound: React.FC = () => {
+  return <h1 className="title">Page Not Found</h1>;
+};

src/styles/_typography.scss

@@ -0,0 +1,100 @@
+@import './utils';
+
+h1 {
+  font-weight: bold;
+  font-size: 32px;
+  line-height: 41px;
+  letter-spacing: -0.01em;
+}
+
+h2 {
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 31px;
+  letter-spacing: 0;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 26px;
+  letter-spacing: 0;
+}
+
+h4 {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0;
+}
+
+h5 {
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: 0;
+}
+
+h6 {
+  font-size: 12px;
+  line-height: 11px;
+  letter-spacing: 0.04em;
+}
+
+button {
+  font-size: 14px;
+  line-height: 21px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: normal;
+}
+
+
+@include on-tablet {
+  h1 {
+    font-size: 48px;
+    line-height: 56px;
+    letter-spacing: -0.01em;
+  }
+
+  h2 {
+    font-size: 32px;
+    line-height: 41px;
+    letter-spacing: -0.01em;
+  }
+
+  h3 {
+    font-size: 22px;
+    line-height: 31px;
+    letter-spacing: 0;
+  }
+
+  h4 {
+    font-size: 20px;
+    line-height: 26px;
+    letter-spacing: 0;
+  }
+
+  h5 {
+    font-size: 12px;
+    line-height: 15px;
+    letter-spacing: 0;
+  }
+
+  h6 {
+    font-size: 12px;
+    line-height: 11px;
+    letter-spacing: 0.04em;
+  }
+
+  button {
+    font-size: 14px;
+    line-height: 21px;
+  }
+
+  p {
+    font-weight: normal;
+  }
+}

src/styles/fonts/_fonts.scss

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: Mont;
+  src: url("../fonts/Mont-Regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url("../fonts/Mont-Regular.otf") format("opentype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url("../fonts/Mont-SemiBold.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+}

src/styles/utils.scss

@@ -0,0 +1,2 @@
+@import './utils/vars';
+@import './utils/mixins';

src/styles/utils/_mixins.scss

@@ -0,0 +1,43 @@
+@mixin hover($_property, $_toValue) {
+  transition: #{$_property} 0.3s;
+  &:hover {
+    #{$_property}: $_toValue;
+  }
+}
+
+@mixin on-tablet {
+  @media (min-width: $width-tablet) {
+    @content;
+  }
+}
+
+@mixin on-laptop {
+  @media (min-width: $width-laptop) {
+    @content;
+  }
+}
+
+@mixin on-desktop {
+  @media (min-width: $width-desktop) {
+    @content;
+  }
+}
+
+@mixin container {
+  padding-inline: 16px;
+  @content;
+
+  @include on-tablet {
+    padding-inline: 24px;
+  }
+
+  @include on-desktop {
+    padding-inline: 32px;
+  }
+}
+
+@mixin template {
+  display: grid;
+  align-items: center;
+  @content;
+}

src/styles/utils/_vars.scss

@@ -0,0 +1,17 @@
+// Colors
+
+$c-primary: #313237;
+$c-secondary: #89939A;
+$c-icon: #B4BDC4;
+$c-element: #E2E6E9;
+$c-hover-bg: #FAFBFC;
+$c-white: #FFF;
+$c-green: #27AE60;
+$c-red: #EB5757;
+
+// Screen-widths
+
+$width-tablet: 640px;
+$width-laptop: 1280px;
+$width-desktop: 1440px;
+$f-main: 'Mont';