mate-academy · flocky674 · Oct 1, 2024 · Oct 1, 2024 · Oct 1, 2024 · Oct 2, 2024
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,4 +1,6 @@
 module.exports = {
   extends: "@mate-academy/stylelint-config",
-  rules: {}
+  rules: {
+    "no-empty-source": null
+  }
 };
diff --git a/index.html b/index.html
@@ -3,7 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👌</text></svg>"
+    />
+    <title>Nice Gadgets</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/icons/cart.svg b/public/icons/cart.svg
diff --git a/public/icons/heart.svg b/public/icons/heart.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,12 @@
+import React from 'react';
 import './App.scss';
+import { Header } from './components/Header';
+import { Outlet } from 'react-router-dom';
 
 export const App = () => (
   <div className="App">
-    <h1>Product Catalog</h1>
+    <Header />
+
+    <Outlet />
   </div>
 );
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { App } from './App';
+import { HomePage } from './pages/HomePage';
+import { PhonePage } from './pages/PhonePage';
+import { TabletPage } from './pages/TabletPage';
+import { AccessoriesPage } from './pages/AccessoriesPage';
+import { FavoritesPage } from './pages/FavoritesPage';
+import { CartPage } from './pages/CartPage';
+import { NotFoundPage } from './pages/NotFoundPage';
+import './styles/index.scss';
+
+export const Root = () => (
+  <Router>
+    <Routes>
+      <Route path="/" element={<App />}>
+        <Route index element={<HomePage />} />
+        <Route path="home" element={<Navigate to="/" replace />} />
+        <Route path="phones" element={<PhonePage />} />
+        <Route path="tablets" element={<TabletPage />} />
+        <Route path="accessories" element={<AccessoriesPage />} />
+        <Route path="favorites" element={<FavoritesPage />} />
+        <Route path="cart" element={<CartPage />} />
+      </Route>
+      <Route path="*" element={<NotFoundPage />} />
+    </Routes>
+  </Router>
+);
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -0,0 +1,79 @@
+.logo {
+  padding: 18px 24px;
+  line-height: 100%;
+  cursor: pointer;
+}
+
+.header {
+  height: 65px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #E2E6E9;
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    column-gap: 24px;
+  }
+
+  &__nav {
+    height: 100%;
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items:center;
+    justify-content:center;
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+    column-gap: 64px;
+    height: 100%;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 11px;
+    letter-spacing: 0.04em;
+    color: #ccc;
+    vertical-align: middle;
+    text-transform: uppercase;
+  }
+
+  &__item {
+    align-items: center;
+    display: flex;
+    height: 100%
+  }
+
+  &__link {
+    height: 100%;
+    line-height: 65px;
+
+    &:hover {
+      color: #313237;
+    }
+
+    &_active{
+      color: #313237;
+      border-bottom: 3px solid #313237;
+      transition: none;
+    }
+  }
+
+  &__icon {
+    width: 64px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-left: 1px solid #E2E6E9;
+
+    &:hover {
+      .header__icon_img {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { NavLink, Link } from 'react-router-dom';
+import styles from './Header.module.scss';
+import classNames from 'classnames';
+
+export const Header = () => {
+  const getNavLinkClass = (isActive: boolean) => {
+    return classNames(
+      styles.header__link,
+      isActive ? styles.header__link_active : '',
+    );
+  };
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.header__wrapper}>
+        <Link to="/">
+          <h4 className={styles.logo}>
+            NICE&#128076;
+            <br />
+            GADGETS
+          </h4>
+        </Link>
+        <nav className={styles.header__nav}>
+          <ul className={styles.header__list}>
+            <li className={styles.header__item}>
+              <NavLink
+                to="/"
+                className={({ isActive }) => getNavLinkClass(isActive)}
+              >
+                Home
+              </NavLink>
+            </li>
+            <li className={styles.header__item}>
+              <NavLink
+                to="/phones"
+                className={({ isActive }) => getNavLinkClass(isActive)}
+              >
+                Phones
+              </NavLink>
+            </li>
+            <li className={styles.header__item}>
+              <NavLink
+                to="/tablets"
+                className={({ isActive }) => getNavLinkClass(isActive)}
+              >
+                Tablets
+              </NavLink>
+            </li>
+            <li className={styles.header__item}>
+              <NavLink
+                to="/accessories"
+                className={({ isActive }) => getNavLinkClass(isActive)}
+              >
+                Accessories
+              </NavLink>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div className={styles.header__toolbar}>
+        <Link to="/favorites" className={styles.header__icon}>
+          <img
+            className={styles.header__icon_img}
+            src="/icons/heart.svg"
+            alt="heart icon"
+          />
+        </Link>
+        <Link to="/cart" className={styles.header__icon}>
+          <img
+            className={styles.header__icon_img}
+            src="/icons/cart.svg"
+            alt="cart icon"
+          />
+        </Link>
+      </div>
+    </header>
+  );
+};
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import React from 'react';
+import { Root } from './Root';
 
-createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+createRoot(document.getElementById('root') as HTMLElement).render(<Root />);
diff --git a/src/pages/AccessoriesPage/AccessoriesPage.module.scss b/src/pages/AccessoriesPage/AccessoriesPage.module.scss
diff --git a/src/pages/AccessoriesPage/AccessoriesPage.tsx b/src/pages/AccessoriesPage/AccessoriesPage.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const AccessoriesPage = () => <h1>Accessories</h1>;
diff --git a/src/pages/AccessoriesPage/index.tsx b/src/pages/AccessoriesPage/index.tsx
@@ -0,0 +1 @@
+export * from './AccessoriesPage';
diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const CartPage = () => {
+  return <h1>Cart Page</h1>;
+};
diff --git a/src/pages/CartPage/index.tsx b/src/pages/CartPage/index.tsx
@@ -0,0 +1 @@
+export * from './CartPage';
diff --git a/src/pages/FavoritesPage/FavoritesPage.module.scss b/src/pages/FavoritesPage/FavoritesPage.module.scss
diff --git a/src/pages/FavoritesPage/FavoritesPage.tsx b/src/pages/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const FavoritesPage = () => <h1>Favorites</h1>;
diff --git a/src/pages/FavoritesPage/index.tsx b/src/pages/FavoritesPage/index.tsx
@@ -0,0 +1 @@
+export * from './FavoritesPage';
diff --git a/src/pages/HomePage/HomePage.module.scss b/src/pages/HomePage/HomePage.module.scss
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const HomePage = () => <h1>Product Catalog</h1>;
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/pages/NotFoundPage/NotFoundPage.module.scss b/src/pages/NotFoundPage/NotFoundPage.module.scss
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const NotFoundPage = () => <h1 className="title">Page not found</h1>;
diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/pages/PhonePage/PhonePage.module.scss b/src/pages/PhonePage/PhonePage.module.scss
diff --git a/src/pages/PhonePage/PhonePage.tsx b/src/pages/PhonePage/PhonePage.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const PhonePage = () => <h1>Mobile phones</h1>;
diff --git a/src/pages/PhonePage/index.tsx b/src/pages/PhonePage/index.tsx
@@ -0,0 +1 @@
+export * from './PhonePage';
diff --git a/src/pages/TabletPage/TabletPage.module.scss b/src/pages/TabletPage/TabletPage.module.scss
diff --git a/src/pages/TabletPage/TabletPage.tsx b/src/pages/TabletPage/TabletPage.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const TabletPage = () => <h1>Tablets</h1>;
diff --git a/src/pages/TabletPage/index.tsx b/src/pages/TabletPage/index.tsx
@@ -0,0 +1 @@
+export * from './TabletPage';
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
@@ -0,0 +1,27 @@
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-Regular.otf') format('woff2'),
+       url('/fonts/Mont-Regular.otf') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-Bold.otf') format('woff2'),
+       url('/fonts/Mont-Bold.otf') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-SemiBold.otf') format('woff2'),
+       url('/fonts/Mont-SemiBold.otf') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+* {
+  font-family: Mont, sans-serif;
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -0,0 +1,4 @@
+* {
+  scroll-behavior: smooth;
+  transition: all 0.2s ease;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -0,0 +1,4 @@
+@import './reset';
+@import './fonts';
+@import './variables';
+@import './global';
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
@@ -0,0 +1,49 @@
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button,
+input,
+textarea {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  outline: none;
+  font: inherit;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}