add WidthLimiter component

Author: Eugene

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
+    "react-slotify": "^0.1.7",
     "typescript": "^4.4.4"
   },
   "scripts": {

src/assets/images/icons/github.svg

@@ -1,14 +1,3 @@
-@keyframes anim-appear {
-  from {
-    opacity: 0;
-    transform: translateY(-32px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes lds-dual-ring {
   0% {
     transform: rotate(0deg);

src/assets/scss/animations.scss

@@ -1,11 +1,14 @@
 @import "../../assets/scss/variables.scss";
 
 .app {
-  max-width: 632px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  justify-content: space-between;
-  padding: 0 $size-lg;
+  &__container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: space-between;
+  }
+
+  &__page {
+    flex: 1;
+  }
 }

src/components/App/index.scss

@@ -7,26 +7,33 @@ import Footer from "../Footer";
 import HomePage from "../../pages/HomePage";
 import ProjectPage from "../../pages/ProjectPage";
 import NotFoundPage from "../../pages/NotFoundPage";
+import WidthLimiter, { WidthLimiterSlot } from "../../components/WidthLimiter";
 import "./index.scss";
 
 const App: FunctionComponent = () => {
   return (
     <div className="app">
-      <Header />
-      <Routes>
-        <Route path="*" element={<NotFoundPage />} />
-        <Route path="/" element={<HomePage />} />
-        {MainConfig.projects.map((project, projectIndex) => {
-          return (
-            <Route
-              key={projectIndex}
-              path="/quick-picture-viewer"
-              element={<ProjectPage project={project} />}
-            />
-          );
-        })}
-      </Routes>
-      <Footer />
+      <WidthLimiter className="app__container">
+        <WidthLimiterSlot>
+          <Header />
+          <div className="app__page">
+            <Routes>
+              <Route path="*" element={<NotFoundPage />} />
+              <Route path="/" element={<HomePage />} />
+              {MainConfig.projects.map((project, projectIndex) => {
+                return (
+                  <Route
+                    key={projectIndex}
+                    path={project.href}
+                    element={<ProjectPage project={project} />}
+                  />
+                );
+              })}
+            </Routes>
+          </div>
+          <Footer />
+        </WidthLimiterSlot>
+      </WidthLimiter>
     </div>
   );
 };

src/components/App/index.tsx

@@ -2,11 +2,18 @@
 
 .header {
   text-align: center;
-  padding: 32px 0;
+  padding: $size-xl 0;
 
   &__logo {
     font: 42px/150% Pacifico;
     color: $accent-color;
+    text-decoration: none;
+
+    &--link {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 
   &__links {

src/components/Header/index.scss

@@ -1,17 +1,33 @@
-import "./index.scss";
 import { FunctionComponent } from "react";
+import { useLocation } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
+
+import MainConfig from "../../config/Main";
 import Link from "../Link";
+import "./index.scss";
 
 const Header: FunctionComponent = () => {
+  const location = useLocation();
+
+  console.log(location);
+
   return (
     <header className="header">
-      <h1 className="header__logo">Module Art</h1>
+      {location.pathname === "/" ? (
+        <h1 className="header__logo">
+          {MainConfig.title}
+        </h1>
+      ) : (
+        <RouterLink to="/" className="header__logo header__logo--link">
+          {MainConfig.title}
+        </RouterLink>
+      )}
       <ul className="header__links">
         <li className="header__link">
-          <Link text="About" href="/about" internal />
+          <Link text="GitHub" href="https://github.com/ModuleArt" />
         </li>
         <li className="header__link">
-          <Link text="GitHub" href="https://github.com/ModuleArt" />
+          <Link text="About" href="/about" internal />
         </li>
       </ul>
     </header>

src/components/Header/index.tsx

@@ -1,4 +1,5 @@
 interface Props {
+  className?: string;
   text: string;
   href: string;
   internal?: boolean;

src/components/Link/Props.ts

@@ -1,18 +1,38 @@
-import "./index.scss";
 import { FunctionComponent } from "react";
-import Props from "./Props";
 import { Link as RouterLink } from "react-router-dom";
+import cn from "classnames";
+
+import Props from "./Props";
+import "./index.scss";
 
-const Link: FunctionComponent<Props> = ({ text, href, internal = false }) => {
+const Link: FunctionComponent<Props> = ({
+  className = "",
+  text,
+  href,
+  internal = false,
+}) => {
   if (internal) {
     return (
-      <RouterLink className="link link--internal" to={href}>
+      <RouterLink
+        className={cn({
+          link: true,
+          "link--internal": true,
+          [className]: true,
+        })}
+        to={href}
+      >
         {text}
       </RouterLink>
     );
   } else {
     return (
-      <a className="link" href={href}>
+      <a
+        className={cn({
+          link: true,
+          [className]: true,
+        })}
+        href={href}
+      >
         {text}
       </a>
     );

src/components/Link/index.tsx

@@ -3,7 +3,7 @@ import Platform from "../../enums/Platform";
 interface Props {
   className: string;
   title: string;
-  href: string;
+  href?: string;
   image: string;
   platform: Platform
 }