integrate react-router-dom

Eugene · Eugene · commit 57dbc10af282 · 2021-12-31T03:05:00.000+02:00
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "node-sass": "4.14.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
     "typescript": "^4.4.4"
   },
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Module Art</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
@@ -1,11 +1,23 @@
-// colors
-$accent-color-pale: #EDC9FD;
-$accent-color: #AA14F0;
+// color
+$accent-color: #0070f3;
+$accent-color-mid: #a7cefb;
+$accent-color-pale: #dfedfe;
 $second-color: #aaa;
 
-// durations
+// duration
 $transition-duration: 0.25s;
 $animation-duration: 0.5s;
 
-//opacity
+// opacity
 $disabled-opacity: 0.5;
+
+// size
+$size-sm: 4px; // small
+$size-md: 8px; // medium
+$size-lg: 16px; // large
+$size-xl: 32px; // extra large
+
+// shadow
+$shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.1); // medium
+$shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.2); // large
+
diff --git a/src/components/App/index.scss b/src/components/App/index.scss
@@ -1,9 +1,11 @@
+@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 16px;
-}
+  padding: 0 $size-lg;
+}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -1,15 +1,31 @@
+import { FunctionComponent } from "react";
+import { Routes, Route } from "react-router-dom";
+
+import MainConfig from "../../config/Main";
 import Header from "../Header";
-import ProjectList from "../ProjectsList";
 import Footer from "../Footer";
-import { FunctionComponent } from "react";
+import HomePage from "../../pages/HomePage";
+import ProjectPage from "../../pages/ProjectPage";
+import NotFoundPage from "../../pages/NotFoundPage";
 import "./index.scss";
-import MainConfig from "../../config/Main";
 
 const App: FunctionComponent = () => {
   return (
     <div className="app">
       <Header />
-      <ProjectList projects={MainConfig.projects} />
+      <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 />
     </div>
   );
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -5,7 +5,7 @@ const Footer: FunctionComponent = () => {
   return (
     <footer className="footer">
       <span className="footer__copyright">
-        Copyright © 2021 Connection Beats. All rights reserved.
+        Copyright © 2022 Module Art. All rights reserved.
       </span>
     </footer>
   );
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -8,10 +8,10 @@ const Header: FunctionComponent = () => {
       <h1 className="header__logo">Module Art</h1>
       <ul className="header__links">
         <li className="header__link">
-          <Link text="Quick Picture Viewer" href="" />
+          <Link text="About" href="/about" internal />
         </li>
         <li className="header__link">
-          <Link text="GitHub" href="" />
+          <Link text="GitHub" href="https://github.com/ModuleArt" />
         </li>
       </ul>
     </header>
diff --git a/src/components/Link/Props.ts b/src/components/Link/Props.ts
@@ -1,6 +1,7 @@
 interface Props {
   text: string;
   href: string;
+  internal?: boolean;
 }
 
 export default Props;
diff --git a/src/components/Link/index.scss b/src/components/Link/index.scss
@@ -9,17 +9,20 @@
   &::before {
     content: "";
     position: absolute;
-    top: 100%;
+    top: 50%;
     left: 0;
-    width: 0;
-    height: 2px;
-    background: $accent-color;
-    transition: width $animation-duration;
+    width: 100%;
+    height: 0;
+    background: $accent-color-pale;
+    transition: height $transition-duration, top $transition-duration;;
+    z-index: -1;
+    border-radius: $size-md;
   }
 
   &:hover {
     &::before {
-      width: 100%;
+      top: 0;
+      height: 100%;
     }
   }
 }
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
@@ -1,13 +1,22 @@
 import "./index.scss";
 import { FunctionComponent } from "react";
 import Props from "./Props";
+import { Link as RouterLink } from "react-router-dom";
 
-const Link: FunctionComponent<Props> = ({ text, href }) => {
-  return (
-    <a className="link" href={href}>
-      {text}
-    </a>
-  );
+const Link: FunctionComponent<Props> = ({ text, href, internal = false }) => {
+  if (internal) {
+    return (
+      <RouterLink className="link link--internal" to={href}>
+        {text}
+      </RouterLink>
+    );
+  } else {
+    return (
+      <a className="link" href={href}>
+        {text}
+      </a>
+    );
+  }
 };
 
 export default Link;
diff --git a/src/components/ProjectCard/index.scss b/src/components/ProjectCard/index.scss
@@ -2,33 +2,45 @@
 
 .project-card {
   &__title {
-    margin-bottom: 8px;
+    margin-bottom: $size-md;
 
     & > a {
       text-decoration: none;
       color: $accent-color;
+      font-weight: 500;
+      font-size: 20px;
     }
   }
 
   &__platform {
     color: $second-color;
+    font-weight: 500;
+    font-size: 20px;
   }
 
   &__image {
     display: block;
     overflow: hidden;
     background: $accent-color-pale;
-    
+    border-radius: $size-md;
+    box-shadow: $shadow-md;
+    transition: box-shadow $animation-duration;
+
     & > img {
       width: 100%;
       vertical-align: top;
-      transition: transform $animation-duration;
+      transition: transform $transition-duration;
+      height: 280px;
+      object-fit: cover;
+      object-position: top;
     }
 
     &:hover {
+      box-shadow: $shadow-lg;
+
       & > img {
         transform: translateY(16px);
       }
     }
   }
-}
+}
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
@@ -1,6 +1,9 @@
-import "./index.scss";
 import { FunctionComponent } from "react";
+import { Link as RouterLink } from "react-router-dom";
+
 import Props from "./Props";
+import Link from "../Link";
+import "./index.scss";
 
 const ProjectCard: FunctionComponent<Props> = ({
   className,
@@ -12,14 +15,12 @@ const ProjectCard: FunctionComponent<Props> = ({
   return (
     <div className={"project-card " + className}>
       <h2 className="project-card__title">
-        <a href={href}>
-          {title}
-          <span className="project-card__platform"> for {platform}</span>
-        </a>
+        <Link text={title} href={href} internal />
+        <span className="project-card__platform"> for {platform}</span>
       </h2>
-      <a className="project-card__image" href={href}>
+      <RouterLink className="project-card__image" to={href}>
         <img src={image} alt={title} />
-      </a>
+      </RouterLink>
     </div>
   );
 };
diff --git a/src/components/ProjectsList/index.tsx b/src/components/ProjectsList/index.tsx
@@ -1,7 +1,8 @@
-import "./index.scss";
 import { FunctionComponent } from "react";
+
 import Props from "./Props";
 import ProjectCard from "../ProjectCard";
+import "./index.scss";
 
 const ProjectsList: FunctionComponent<Props> = ({ projects }) => {
   return (
diff --git a/src/config/Main.ts b/src/config/Main.ts
@@ -7,17 +7,17 @@ const mainConfig: MainConfig = {
   projects: [
     {
       title: "Quick Picture Viewer",
-      href: "https://moduleart.github.io/quick-picture-viewer",
+      href: "/quick-picture-viewer",
       image: QpvImage,
       githubUrl: "https://github.com/quick-picture-viewer",
       platform: Platform.win,
     },
     {
-      title: "Quick Color Picker",
-      href: "https://moduleart.github.io/quick-picture-viewer",
-      image: QpvImage,
+      title: "SzContext",
+      href: "/sz-context",
+      image: "https://github.com/RoadToDream/SzContext/raw/main/images/SzContextLight.png",
       githubUrl: "https://github.com/quick-picture-viewer",
-      platform: Platform.win,
+      platform: Platform.mac,
     },
   ],
 };
diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,7 @@
 * {
   padding: 0;
   margin: 0;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 150%;
 }
 
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { HashRouter } from "react-router-dom";
 
+import App from "./components/App";
 import "./assets/scss/fonts.scss";
 import "./index.css";
-import App from "./components/App";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <HashRouter>
+      <App />
+    </HashRouter>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+
+import ProjectList from "../../components/ProjectsList";
+import MainConfig from "../../config/Main";
+
+const HomePage: FunctionComponent = () => {
+  return (
+    <div className="home-page">
+      <ProjectList projects={MainConfig.projects} />
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx
@@ -0,0 +1,11 @@
+import { FunctionComponent } from "react";
+
+const NotFoundPage: FunctionComponent = () => {
+  return (
+    <div className="not-found-page">
+      <h1>404</h1>
+    </div>
+  );
+};
+
+export default NotFoundPage;
diff --git a/src/pages/ProjectPage/Props.ts b/src/pages/ProjectPage/Props.ts
@@ -0,0 +1,7 @@
+import Project from "../../interfaces/Project";
+
+interface Props {
+  project: Project;
+}
+
+export default Props;
diff --git a/src/pages/ProjectPage/index.tsx b/src/pages/ProjectPage/index.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent } from "react";
+
+import Props from "./Props";
+
+const ProjectPage: FunctionComponent<Props> = () => {
+  return (
+    <div className="project-page">
+    </div>
+  );
+};
+
+export default ProjectPage;
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`interface Props {`
`2`	`2`	`text: string;`
`3`	`3`	`href: string;`
	`4`	`+ internal?: boolean;`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`export default Props;`