Added horizontal scroller component

package-lock.json

@@ -4912,6 +4912,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -5744,6 +5749,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
       "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
     },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -6252,6 +6262,11 @@
         }
       }
     },
+    "easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
     "ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -14219,6 +14234,16 @@
         }
       }
     },
+    "react-indiana-drag-scroll": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.2.0.tgz",
+      "integrity": "sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      }
+    },
     "react-input-autosize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",
+    "react-indiana-drag-scroll": "^2.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/assets/images/svg/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 9L14.25 9" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 3.75L14.25 9L9 14.25" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Scroller/HorizontalScroller.js

@@ -0,0 +1,37 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import {
+  HorizontalScrollerContainer,
+  Arrow,
+  ListContainer,
+  ArrowIcon,
+} from "./HorizontalScroller.styled";
+
+const HorizontalScroller = (props) => {
+  const scrollRef = useRef(null);
+
+  const handleRight = () => {
+    scrollRef.current.scrollBy({ left: 50, behaviour: "smooth" });
+  };
+  const handleLeft = () => {
+    scrollRef.current.scrollBy({ left: -50, behaviour: "smooth" });
+  };
+  return (
+    <HorizontalScrollerContainer>
+      <Arrow onClick={handleLeft}>
+        <ArrowIcon side={"left"} />
+      </Arrow>
+      <ListContainer innerRef={scrollRef}>{props.children}</ListContainer>
+      <Arrow onClick={handleRight}>
+        <ArrowIcon side={"right"} />
+      </Arrow>
+    </HorizontalScrollerContainer>
+  );
+};
+
+HorizontalScroller.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+export default HorizontalScroller;

src/components/Scroller/HorizontalScroller.styled.js

@@ -0,0 +1,58 @@
+import { Box, Button } from "@mui/material";
+import styled from "styled-components";
+import {ReactComponent as DownArrow} from "../../assets/images/svg/arrow-down.svg"
+import selectedTheme from "../../themes";
+import ScrollContainer from 'react-indiana-drag-scroll'
+
+
+export const HorizontalScrollerContainer = styled(Box)`
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    cursor: grab;
+    /* scroll-behavior: smooth; */
+`
+export const Arrow = styled(Button)`
+    border: 1px solid ${selectedTheme.primaryPurple};
+    border-radius: 100%;
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+    display: block;
+    box-sizing: border-box;
+    cursor: pointer;
+    padding-left: 8px;
+    padding-top: 10px;
+    margin-top: auto;
+    margin-bottom: auto;
+    &:hover {
+        background-color: ${selectedTheme.primaryPurple};
+        & svg path {
+            stroke: white;
+        }
+    }
+`
+export const ListContainer = styled(ScrollContainer)`
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    cursor: grab;
+    scroll-behavior: smooth;
+    margin: 0 20px;
+    user-select: none;
+`
+export const ArrowIcon = styled(DownArrow)`
+    ${props => props.side === 'left' && `
+        transform: rotate(180deg);
+    `}
+    width: 18px;
+    height: 18px;
+    & path {
+        ${props => props.disabled && `
+        stroke: ${selectedTheme.iconStrokeDisabledColor}
+        `}
+    }
+`