add slider component

Eugene · Eugene · commit b8229fe3fc95 · 2022-01-01T13:09:41.000+02:00
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-document-title": "^2.0.3",
     "react-dom": "^17.0.2",
+    "react-responsive-carousel": "^3.2.22",
     "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
     "react-slotify": "^0.1.7",
diff --git a/src/assets/images/icons/mac.svg b/src/assets/images/icons/mac.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" /></svg>
diff --git a/src/assets/images/icons/trello.svg b/src/assets/images/icons/trello.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19.5,2H4.5A2.5,2.5 0 0,0 2,4.5V19.5A2.5,2.5 0 0,0 4.5,22H19.5A2.5,2.5 0 0,0 22,19.5V4.5A2.5,2.5 0 0,0 19.5,2M10.7,17.2A1.2,1.2 0 0,1 9.5,18.4H5.8C5.14,18.4 4.6,17.86 4.6,17.2V5.8A1.2,1.2 0 0,1 5.8,4.6H9.5C10.16,4.6 10.7,5.14 10.7,5.8V17.2M19.4,12.2C19.4,12.86 18.86,13.4 18.2,13.4H14.5C13.84,13.4 13.3,12.86 13.3,12.2V5.8C13.3,5.14 13.84,4.6 14.5,4.6H18.2C18.86,4.6 19.4,5.14 19.4,5.8V12.2Z" /></svg>
diff --git a/src/assets/images/icons/windows.svg b/src/assets/images/icons/windows.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M3,12V6.75L9,5.43V11.91L3,12M20,3V11.75L10,11.9V5.21L20,3M3,13L9,13.09V19.9L3,18.75V13M20,13.25V22L10,20.09V13.1L20,13.25Z" /></svg>
diff --git a/src/assets/images/projects/sz-context/1.png b/src/assets/images/projects/sz-context/1.png
diff --git a/src/assets/images/projects/sz-context/2.png b/src/assets/images/projects/sz-context/2.png
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
@@ -3,6 +3,7 @@
 * {
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 }
 
 body {
@@ -21,3 +22,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+img {
+  vertical-align: top;
+}
diff --git a/src/components/ProjectCard/Props.ts b/src/components/ProjectCard/Props.ts
@@ -6,7 +6,6 @@ interface Props {
   href?: string;
   image: string;
   platform: Platform;
-  fullHeight?: boolean;
 }
 
 export default Props;
diff --git a/src/components/ProjectCard/index.scss b/src/components/ProjectCard/index.scss
@@ -20,7 +20,7 @@
     display: block;
     overflow: hidden;
     background: $color-substrate;
-    border-radius: $size-md;
+    border-radius: $size-lg;
     position: relative;
     height: 280px;
   }
@@ -29,26 +29,14 @@
     position: absolute;
     left: 50px;
     width: calc(100% - 100px);
-    vertical-align: top;
     top: 100px;
     transition: top $duration-t, box-shadow $duration-t;
-    border-radius: $size-sm;
+    border-radius: $size-md;
     box-shadow: $shadow-lg;
   }
 
-  &--clickable &__tile:hover &__image,
-  &--full-height &__image {
+  &--clickable &__tile:hover &__image {
     top: 50px;
     box-shadow: $shadow-xl;
   }
-
-  &--full-height &__tile {
-    height: auto;
-    padding: 50px;
-  }
-
-  &--full-height &__image {
-    position: initial;
-    width: 100%;
-  }
 }
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
@@ -11,14 +11,12 @@ const ProjectCard: FunctionComponent<Props> = ({
   href = null,
   image,
   platform,
-  fullHeight = false,
 }) => {
   return (
     <div
       className={cn({
         "project-card": true,
         "project-card--clickable": href,
-        "project-card--full-height": fullHeight,
         [className]: true,
       })}
     >
diff --git a/src/components/ProjectsList/index.tsx b/src/components/ProjectsList/index.tsx
@@ -14,7 +14,7 @@ const ProjectsList: FunctionComponent<Props> = ({ projects }) => {
             className="projects-list__project"
             title={project.title}
             href={project.href}
-            image={project.image}
+            image={project.images[0]}
             platform={project.platform}
           />
         );
diff --git a/src/components/Slider/Props.ts b/src/components/Slider/Props.ts
@@ -0,0 +1,6 @@
+interface Props {
+  images: string[];
+  labels?: string[];
+}
+
+export default Props;
diff --git a/src/components/Slider/index.scss b/src/components/Slider/index.scss
@@ -0,0 +1,39 @@
+@import "../../assets/scss/variables.scss";
+
+.slider {
+  background: $color-substrate;
+  border-radius: $size-lg;
+  padding: 50px;
+
+  &__image {
+    width: 100%;
+  }
+
+  &__carousel {
+    .carousel-slider {
+      overflow: hidden;
+      box-shadow: $shadow-xl;
+      border-radius: $size-md;
+    }
+
+    .thumb {
+      border-radius: $size-md;
+      cursor: pointer;
+      border: 2px solid transparent;
+      padding: 0;
+
+      &:hover, &.selected {
+        border: 2px solid $color-primary;
+      }
+
+      .slider__image {
+        border-radius: $size-sm;
+      }
+    }
+
+    .thumbs-wrapper {
+      margin-bottom: 0;
+      text-align: center;
+    }
+  }
+}
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
@@ -0,0 +1,35 @@
+import { FunctionComponent } from "react";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+
+import Props from "./Props";
+import "./index.scss";
+
+const Slider: FunctionComponent<Props> = ({ images, labels = [] }) => {
+  return (
+    <div className="slider">
+      <Carousel
+        className="slider__carousel"
+        infiniteLoop
+        dynamicHeight
+        autoFocus
+        showStatus={false}
+        showIndicators={false}
+      >
+        {images.map((image, imageIndex) => {
+          return (
+            <div className="slider__slide" key={imageIndex}>
+              <img
+                className="slider__image"
+                src={image}
+                alt={labels[imageIndex] ? labels[imageIndex] : ""}
+              />
+            </div>
+          );
+        })}
+      </Carousel>
+    </div>
+  );
+};
+
+export default Slider;
diff --git a/src/config/Main.ts b/src/config/Main.ts
@@ -1,36 +1,48 @@
 import Platform from "../enums/Platform";
 import MainConfig from "../interfaces/MainConfig";
 
-import QpvImage from "../assets/images/projects/quick-picture-viewer.png";
+import SzContextImage1 from "../assets/images/projects/sz-context/1.png";
+import SzContextImage2 from "../assets/images/projects/sz-context/2.png";
 
 const mainConfig: MainConfig = {
   title: "Module Art",
   projects: [
     {
       title: "Quick Picture Viewer",
-      shortDescription: "Lightweight, versatile desktop image viewer for Windows",
+      shortDescription:
+        "Lightweight, versatile desktop image viewer for Windows",
       href: "/quick-picture-viewer",
-      // image: QpvImage,
-      image: "https://moduleart.github.io/quick-picture-viewer/imgs/screenshots/main.png",
+      images: [
+        "https://moduleart.github.io/quick-picture-viewer/imgs/screenshots/main.png",
+
+      ],
       githubUrl: "https://github.com/quick-picture-viewer",
       platform: Platform.win,
     },
     {
       title: "SzContext",
-      shortDescription: "Open files or folders using your favorite app from Finder® context menu",
+      shortDescription:
+        "Open files or folders using your favorite app from Finder® context menu",
       href: "/sz-context",
-      image: "https://github.com/RoadToDream/SzContext/raw/main/images/SzContextLight.png",
+      images: [
+       SzContextImage1, 
+       SzContextImage2,
+      ],
       githubUrl: "https://github.com/quick-picture-viewer",
       platform: Platform.mac,
     },
     {
       title: "Quick Color Picker",
-      shortDescription: "Lightweight desktop color picker and color editor utility for Windows",
+      shortDescription:
+        "Lightweight desktop color picker and color editor utility for Windows",
       href: "/quick-color-picker",
-      image: "https://github.com/ModuleArt/quick-color-picker/raw/v2/docs/screenshots/main.png",
+      images: [
+        "https://github.com/ModuleArt/quick-color-picker/raw/v2/docs/screenshots/main.png",
+          
+      ],
       githubUrl: "https://github.com/quick-color-picker",
       platform: Platform.win,
-    }
+    },
   ],
 };
 
diff --git a/src/interfaces/Project.ts b/src/interfaces/Project.ts
@@ -4,7 +4,7 @@ interface Project {
   title: string;
   shortDescription: string;
   href: string;
-  image: string;
+  images: string[];
   githubUrl: string;
   platform: Platform;
 }
diff --git a/src/pages/ProjectPage/index.tsx b/src/pages/ProjectPage/index.tsx
@@ -2,20 +2,14 @@ import { FunctionComponent } from "react";
 import DocumentTitle from "react-document-title";
 
 import Props from "./Props";
-import ProjectCard from "../../components/ProjectCard";
+import Slider from "../../components/Slider";
 import "./index.scss";
 
 const ProjectPage: FunctionComponent<Props> = ({ project }) => {
   return (
     <div className="project-page">
       <DocumentTitle title={`${project.title} - ${project.shortDescription}`}>
-        <ProjectCard
-          className="projects-page__card"
-          title={project.title}
-          image={project.image}
-          platform={project.platform}
-          fullHeight
-        />
+        <Slider images={project.images} />
       </DocumentTitle>
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
@@ -3434,7 +3434,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.3.1:
+classnames@^2.2.5, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -9271,7 +9271,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.6:
+prop-types@^15.5.6, prop-types@^15.5.8:
   version "15.8.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588"
   integrity sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==
@@ -9508,6 +9508,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-easy-swipe@^0.0.21:
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
+  integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
@@ -9528,6 +9535,15 @@ react-refresh@^0.8.3:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-responsive-carousel@^3.2.22:
+  version "3.2.22"
+  resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.22.tgz#6281603daa33656940d01e207f511b83c0093c70"
+  integrity sha512-/r7dsIaN+l417IYIS0Fr7Z5VlpK3KYnTIIsdVCWSqtuJRIZNM+qdBIA4RIbzQtuW/ZBTnQanBecblCxg0HCqLQ==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+    react-easy-swipe "^0.0.21"
+
 react-router-dom@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`* {`
`4`	`4`	`padding: 0;`
`5`	`5`	`margin: 0;`
	`6`	`+ box-sizing: border-box;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`body {`
`@@ -21,3 +22,7 @@ code {`
`21`	`22`	`font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",`
`22`	`23`	`monospace;`
`23`	`24`	`}`
	`25`	`+`
	`26`	`+img {`
	`27`	`+ vertical-align: top;`
	`28`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@ interface Props {`
`6`	`6`	`href?: string;`
`7`	`7`	`image: string;`
`8`	`8`	`platform: Platform;`
`9`		`- fullHeight?: boolean;`
`10`	`9`	`}`
`11`	`10`
`12`	`11`	`export default Props;`