add Header component

Beelink · Beelink · commit f6688e48ae81 · 2021-11-17T16:19:26.000+02:00
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
@@ -1,6 +1,6 @@
 // colors
-$accent-color: #bc8cf2;
-$accent-hover-color: #aa14f0;
+$accent-color-pale: #bc8cf2;
+$accent-color: #aa14f0;
 $border-color: #aaa;
 $back-color: #eee;
 $back-hover-color: #ddd;
diff --git a/src/components/App/index.scss b/src/components/App/index.scss
@@ -0,0 +1,4 @@
+.app {
+  max-width: 600px;
+  margin: 0 auto;
+}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -1,10 +1,14 @@
 import Header from "../Header";
+import ProjectList from "../ProjectsList";
 import { FunctionComponent } from "react";
+import "./index.scss";
+import MainConfig from "../../config/Main";
 
 const App: FunctionComponent = () => {
   return (
     <div className="app">
       <Header />
+      <ProjectList projects={MainConfig.projects} />
     </div>
   );
 };
diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss
@@ -1,5 +1,21 @@
 @import "../../assets/scss/variables.scss";
 
 .header {
-  
+  text-align: center;
+  padding: 16px 0;
+
+  &__logo {
+    font: 42px/150% Pacifico;
+    color: $accent-color;
+  }
+
+  &__links {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__link {
+    margin: 0 8px;
+  }
 }
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,8 +1,21 @@
 import "./index.scss";
 import { FunctionComponent } from "react";
+import Link from "../Link";
 
 const Header: FunctionComponent = () => {
-  return <header className="header"></header>;
+  return (
+    <header className="header">
+      <h1 className="header__logo">Module Art</h1>
+      <ul className="header__links">
+        <li className="header__link">
+          <Link text="Quick Picture Viewer" href="" />
+        </li>
+        <li className="header__link">
+          <Link text="GitHub" href="" />
+        </li>
+      </ul>
+    </header>
+  );
 };
 
 export default Header;
diff --git a/src/components/Link/Props.ts b/src/components/Link/Props.ts
@@ -0,0 +1,6 @@
+interface Props {
+  text: string;
+  href: string;
+}
+
+export default Props;
diff --git a/src/components/Link/index.scss b/src/components/Link/index.scss
@@ -0,0 +1,25 @@
+@import "../../assets/scss/variables.scss";
+
+.link {
+  display: inline-block;
+  text-decoration: none;
+  color: $accent-color;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: $accent-color;
+    transition: width $animation-duration;
+  }
+
+  &:hover {
+    &::before {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
@@ -0,0 +1,13 @@
+import "./index.scss";
+import { FunctionComponent } from "react";
+import Props from "./Props";
+
+const Link: FunctionComponent<Props> = ({ text, href }) => {
+  return (
+    <a className="link" href={href}>
+      {text}
+    </a>
+  );
+};
+
+export default Link;
diff --git a/src/components/ProjectCard/Props.ts b/src/components/ProjectCard/Props.ts
@@ -0,0 +1,7 @@
+interface Props {
+  title: string;
+  href: string;
+  imageUrl: string;
+}
+
+export default Props;
diff --git a/src/components/ProjectCard/index.scss b/src/components/ProjectCard/index.scss
@@ -0,0 +1,3 @@
+.project-card {
+  background: #eee;
+}
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
@@ -0,0 +1,13 @@
+import "./index.scss";
+import { FunctionComponent } from "react";
+import Props from "./Props";
+
+const ProjectCard: FunctionComponent<Props> = ({ title, href, imageUrl }) => {
+  return (
+    <div className="project-card">
+      <h2 className="project-card__title">{title}</h2>
+    </div>
+  );
+};
+
+export default ProjectCard;
diff --git a/src/components/ProjectsList/Props.ts b/src/components/ProjectsList/Props.ts
@@ -0,0 +1,7 @@
+import Project from "../../interfaces/Project";
+
+interface Props {
+  projects: Project[];
+}
+
+export default Props;
diff --git a/src/components/ProjectsList/index.scss b/src/components/ProjectsList/index.scss
diff --git a/src/components/ProjectsList/index.tsx b/src/components/ProjectsList/index.tsx
@@ -0,0 +1,22 @@
+import "./index.scss";
+import { FunctionComponent } from "react";
+import Props from "./Props";
+import ProjectCard from "../ProjectCard";
+
+const ProjectsList: FunctionComponent<Props> = ({ projects }) => {
+  return (
+    <div className="projects-list">
+      {projects.map((project, index) => {
+        return (
+          <ProjectCard
+            title={project.title}
+            href={project.href}
+            imageUrl={project.imageUrl}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default ProjectsList;
diff --git a/src/config/Main.ts b/src/config/Main.ts
@@ -0,0 +1,23 @@
+import Platform from "../enums/Platform";
+import MainConfig from "../interfaces/MainConfig";
+
+const mainConfig: MainConfig = {
+  projects: [
+    {
+      title: "Quick Picture Viewer",
+      href: "https://moduleart.github.io/quick-picture-viewer",
+      imageUrl: "https://moduleart.github.io/quick-picture-viewer",
+      githubUrl: "https://github.com/quick-picture-viewer",
+      platform: Platform.win,
+    },
+    {
+      title: "Quick Color Picker",
+      href: "https://moduleart.github.io/quick-picture-viewer",
+      imageUrl: "https://moduleart.github.io/quick-picture-viewer",
+      githubUrl: "https://github.com/quick-picture-viewer",
+      platform: Platform.win,
+    },
+  ],
+};
+
+export default mainConfig;
diff --git a/src/enums/Platform.ts b/src/enums/Platform.ts
@@ -0,0 +1,6 @@
+enum Platform {
+  win = "WINDOWS",
+  mac = "MACOS",
+}
+
+export default Platform;
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,19 @@
-body {
+* {
+  padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-size: 18px;
+  line-height: 150%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
+import "./assets/scss/fonts.scss";
 import "./index.css";
 import App from "./components/App";
 
diff --git a/src/interfaces/MainConfig.ts b/src/interfaces/MainConfig.ts
@@ -0,0 +1,7 @@
+import Project from "./Project";
+
+interface MainConfig {
+  projects: Project[];
+}
+
+export default MainConfig;
diff --git a/src/interfaces/Project.ts b/src/interfaces/Project.ts
@@ -0,0 +1,11 @@
+import Platform from "../enums/Platform";
+
+interface Project {
+  title: string;
+  href: string;
+  imageUrl: string;
+  githubUrl: string;
+  platform: Platform;
+}
+
+export default Project;
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +.app {
 +  max-width: 600px;
 +  margin: 0 auto;
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.project-card {`
	`2`	`+ background: #eee;`
	`3`	`+}`