1 files changed, 117 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/CarouselWidget.js b/front/odiparpack/app/components/Widget/CarouselWidget.js
new file mode 100644
index 0000000..51dd522
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/CarouselWidget.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import carouselData from 'ba-api/carouselData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+import { Typography, IconButton, Icon } from '@material-ui/core';
+import styles from './widget-jss';
+
+
+function SampleNextArrow(props) {
+  const { onClick } = props;
+  return (
+    <IconButton
+      className="nav-next"
+      onClick={onClick}
+    >
+      <ArrowForward />
+    </IconButton>
+  );
+}
+
+SampleNextArrow.propTypes = {
+  onClick: PropTypes.func,
+};
+
+SampleNextArrow.defaultProps = {
+  onClick: undefined,
+};
+
+function SamplePrevArrow(props) {
+  const { onClick } = props;
+  return (
+    <IconButton
+      className="nav-prev"
+      onClick={onClick}
+    >
+      <ArrowBack />
+    </IconButton>
+  );
+}
+
+SamplePrevArrow.propTypes = {
+  onClick: PropTypes.func,
+};
+
+SamplePrevArrow.defaultProps = {
+  onClick: undefined,
+};
+
+class CarouselWidget extends React.Component {
+  render() {
+    const { classes } = this.props;
+    const settings = {
+      dots: true,
+      infinite: true,
+      centerMode: false,
+      speed: 500,
+      autoplaySpeed: 5000,
+      pauseOnHover: true,
+      autoplay: true,
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 960,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 1,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 600,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            infinite: true,
+            dots: true
+          }
+        },
+      ],
+      cssEase: 'ease-out',
+      nextArrow: <SampleNextArrow />,
+      prevArrow: <SamplePrevArrow />
+    };
+    return (
+      <div className="container custom-arrow">
+        <Slider {...settings}>
+          {carouselData.map((item, index) => (
+            <div key={index.toString()}>
+              <div style={{ backgroundColor: item.background }} className={classes.carouselItem}>
+                <Icon className={classes.iconBg}>{item.icon}</Icon>
+                <Typography className={classes.carouselTitle} variant="subtitle1">
+                  <Icon>{item.icon}</Icon>
+                  {item.title}
+                </Typography>
+                <Typography className={classes.carouselDesc}>{item.desc}</Typography>
+              </div>
+            </div>
+          ))}
+        </Slider>
+      </div>
+    );
+  }
+}
+
+CarouselWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CarouselWidget);