added basic card swipe support

Author: bennobuilder

docusaurus.config.js

@@ -62,9 +62,9 @@ const config = {
     colorMode: {
       defaultMode: 'dark',
       disableSwitch: false,
-      respectPrefersColorScheme: true,
+      respectPrefersColorScheme: false,
     },
-    // image: '/img/meta.png', // Gets used in Head
+    // image: '/img/meta.png', // Gets used in Head as Meta Image (og:image)
     announcementBar: {
       id: 'github-star',
       content: customFields.announcementBarContent,

package.json

@@ -34,17 +34,18 @@
     "react-icons": "^4.1.0",
     "react-live": "^2.2.3",
     "react-spring": "^8.0.27",
+    "react-swipeable": "^6.0.1",
     "react-toastify": "^6.2.0",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
+    "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.0",
-    "@types/jest": "^26.0.15",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
     "eslint": "^7.17.0",

src/_pages/LandingPage/components/OtherFeaturesView/components/Cards/index.tsx

@@ -3,6 +3,7 @@ import Card from './components/Card';
 import styles from './styles.module.css';
 import BulletItem from './components/BulletItem';
 import { useWindowSize } from '../../../../../../hooks/useWindowSize';
+import { useSwipeable } from 'react-swipeable';
 
 export interface CardInterface {
   title: string;
@@ -26,6 +27,19 @@ const Cards: React.FC<Props> = (props) => {
     height: 600,
   });
 
+  const handlers = useSwipeable({
+    onSwipedLeft: () => {
+      console.log('Swiped Left');
+      if (index < cards.length - 1) setIndex(index + 1);
+    },
+    onSwipedRight: () => {
+      console.log('Swiped Right');
+      if (index > 0) setIndex(index - 1);
+    },
+    preventDefaultTouchmoveEvent: true,
+    trackMouse: true,
+  });
+
   const getCardProps = useCallback(
     (
       i: number
@@ -104,7 +118,7 @@ const Cards: React.FC<Props> = (props) => {
   );
 
   return (
-    <div className={styles.Container}>
+    <div className={styles.Container} {...handlers}>
       <div
         className={styles.Slider}
         style={{

src/_pages/LandingPage/components/OtherFeaturesView/index.tsx

@@ -27,7 +27,7 @@ const cards: CardInterface[] = [
   {
     title: 'Well Tested',
     description:
-      'AgileTs has over 1000 jest tests to ensure everything works as expected.',
+      'AgileTs has over 2000 jest tests to ensure everything works as expected.',
     to: 'docs/introduction',
     imagePath: 'img/pages/landing/engineer.svg',
   },