Added Header, Menu and SVG-loader

.eslintignore

@@ -0,0 +1,2 @@
+webpack.config.js
+*.d.ts

package.json

@@ -20,6 +20,7 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "@svgr/webpack": "^5.4.0",
     "@types/classnames": "^2.2.11",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
@@ -46,8 +47,10 @@
     "sass-loader": "^10.0.5",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.7",
+    "typed-scss-modules": "^3.3.0",
     "typescript": "^4.0.5",
     "typescript-plugin-css-modules": "^2.8.0",
+    "url-loader": "^4.1.1",
     "webpack": "^4.44.2",
     "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"
@@ -58,7 +61,7 @@
     }
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css}": [
+    "src/**/*.{js,jsx,ts,tsx,json}": [
       "pretty-quick --staged",
       "eslint ./src"
     ]

src/App.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
 
-import s from './App.module.scss';
-import Footer from './components/Footer';
-import Header from './components/Header';
+import HomePage from './pages/Home';
 
 const App = () => {
   return (
     <div>
-      <Header />
-      <div className={s.content}>This is App Component!</div>
-      <Footer />
+      <HomePage />
     </div>
   );
 };

src/_variables.scss

@@ -0,0 +1,6 @@
+$third: #f5db13;
+$primary: #f2b807;
+$second: #f28f16;
+$danger: #d93e30;
+$white: #f2f2f2;
+$dark: #212121;

src/components/Header/Header.module.scss

@@ -0,0 +1,64 @@
+@import '../../variables';
+
+.root {
+  height: 93px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wrap {
+  width: 100%;
+  max-width: 1125px;
+  height: 63px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pokemonLogo {
+  width: 158px;
+  height: 63px;
+}
+
+.menuWrap {
+  display: flex;
+  align-items: center;
+  max-width: 658px;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.menuLink {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 25px;
+  line-height: 29px;
+  color: $dark;
+  text-decoration: none;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: -8px;
+    height: 1px;
+    width: 1%;
+    background: $dark;
+    border: 1px solid $dark;
+    border-radius: 6px;
+    opacity: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    transition: opacity, width ease-in-out 0.25s;
+  }
+
+  &:hover,
+  &.activeLink {
+    &:after {
+      width: 100%;
+      opacity: 1;
+    }
+  }
+}

src/components/Header.module.scss.d.ts → src/components/Header/Header.module.scss.d.ts

@@ -1,7 +1,12 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  header: string;
+  'activeLink': string;
+  'menuLink': string;
+  'menuWrap': string;
+  'pokemonLogo': string;
+  'root': string;
+  'wrap': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

src/components/Header/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import s from './Header.module.scss';
+
+import { ReactComponent as PokemonLogoSvg } from './assets/Logo.svg';
+
+interface IMenu {
+  id: number;
+  value: string;
+  link: string;
+}
+
+const MENU: IMenu[] = [
+  {
+    id: 1,
+    value: 'Home',
+    link: '#',
+  },
+  {
+    id: 2,
+    value: 'Pokédex',
+    link: '#',
+  },
+  {
+    id: 3,
+    value: 'Legendaries',
+    link: '#',
+  },
+  {
+    id: 4,
+    value: 'Documentation',
+    link: '#',
+  },
+];
+
+const Header = () => {
+  return (
+    <div className={s.root}>
+      <div className={s.wrap}>
+        <div className={s.pokemonLogo}>
+          <PokemonLogoSvg />
+        </div>
+        <div className={s.menuWrap}>
+          {MENU.map(({ value, link, id }, index) => (
+            <a key={id} href={link} className={s.menuLink}>
+              {value}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/index.css

@@ -1,4 +1,10 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
 body {
-	min-height: 100vh;
-	background: linear-gradient(180deg, #F5DB13 0%, #F2B807 100%);
-}
+  background: linear-gradient(180deg, #f5db13 0%, #f2b807 100%);
+  margin: 0;
+  padding: 0;
+}

src/pages/Home/Home.module.scss

@@ -0,0 +1,6 @@
+@import '../../variables';
+
+.root {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #third 0%, #primary 100%);
+}

src/components/Footer.module.scss.d.ts → src/pages/Home/Home.module.scss.d.ts

@@ -1,7 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  footer: string;
+  'root': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

src/pages/Home/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Header from '../../components/Header';
+
+import s from './Home.module.scss';
+
+const HomePage = () => {
+  return (
+    <div className={s.root}>
+      <Header />
+    </div>
+  );
+};
+
+export default HomePage;

webpack.config.js

@@ -12,6 +12,11 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'main.js',
   },
+  watch: true,
+  watchOptions: {
+    ignored: /node_modules/,
+    poll: 1000,
+  },
   module: {
     rules: [
       {
@@ -41,6 +46,10 @@ module.exports = {
           'sass-loader',
         ],
       },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack', 'url-loader'],
+      },
     ],
   },
   plugins: [