Feature/tech 438 hero component

lib/Hero/Carousel.js

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+import Swipe from "react-easy-swipe";
+
+const Carousel = ({children}) => {
+  const slideLength = children.length;
+  const handleNextClick = () => {
+    const index = currentIndex === slideLength - 1 ? 0 : currentIndex + 1
+    setCurrentIndex(index)
+  }
+  const handleOnPrevClick = () => {
+    const index = currentIndex === 0 ? slideLength - 1 : currentIndex - 1
+    setCurrentIndex(index)
+  };
+
+  const [currentIndex, setCurrentIndex] = useState(0)
+  return (
+    <div className="m-auto">
+      <div className="w-full relative select-none">
+        <AiOutlineLeft
+          onClick={handleOnPrevClick}
+          className="absolute left-0 text-3xl inset-y-1/2 text-white cursor-pointer"
+        />
+        <Swipe>
+          {
+            children.map((child, index) =>
+              React.cloneElement(child, {
+                className: `
+                  ${index === currentIndex
+                  ? "block w-full h-auto object-cover"
+                  : "hidden"}
+              `})
+            )
+          }
+          <div>
+          </div>
+        </Swipe>
+        <div className="absolute w-full flex justify-center bottom-0">
+          {children.map((element, index) => {
+            return (
+              <div
+                className={
+                  index === currentIndex
+                    ? "h-2 w-2 bg-black rounded-full mx-2 mb-2 cursor-pointer"
+                    : "h-2 w-2 bg-white rounded-full mx-2 mb-2 cursor-pointer"
+                }
+                key={index}
+                  onClick={() => {
+                    setCurrentIndex(index);
+                  }}
+                />
+            );
+          })}
+        </div>
+        <AiOutlineRight
+          onClick={handleNextClick}
+          className="absolute right-0 text-3xl inset-y-1/2 text-white cursor-pointer"
+        />
+        </div>
+      </div>
+  );
+};
+
+export default Carousel;

lib/Hero/Content.js

@@ -1,44 +1,29 @@
 import React from 'react';
 import clsx from 'clsx';
-import { Button as ButtonComponent } from '../Button';
 
 const Content = ({
   classNames = {},
   title,
   subTitle,
   imageUrl,
   hasOverlay,
-  NextImage,
-  Button = () => (
-    <ButtonComponent
-      displayText="Shop Now"
-      onClick={() => {
-        alert('You clicked me');
-      }}
-    />
-  ),
+  Image,
+  Button,
 }) => {
-  /**
-   * Next Image loader
-   * @returns {*}
-   */
-  const myLoader = () => {
-    return imageUrl;
-  };
   return (
     <>
       <div
         className={clsx('flex items-center justify-center', classNames.wrapper)}
         style={{
-          background: NextImage === undefined ? 'url(' + imageUrl + ')' : '',
+          background: Image === undefined ? 'url(' + imageUrl + ')' : '',
           backgroundPosition: 'center',
           backgroundSize: 'cover',
           backgroundRepeat: 'no-repeat',
           height: '100vh',
           width: '100vw',
         }}
       >
-        {NextImage && (
+        {Image && (
           <div
             style={{
               position: 'fixed',
@@ -48,13 +33,7 @@ const Content = ({
               zIndex: -1,
             }}
           >
-            <NextImage
-              loader={myLoader}
-              alt={title}
-              src={imageUrl}
-              layout="fill"
-              objectFit="cover"
-            />
+            <Image/>
           </div>
         )}
         <div
@@ -94,7 +73,7 @@ const Content = ({
               classNames.buttonWrapper,
             )}
           >
-            {Button()}
+            <Button />
           </div>
         </div>
       </div>

lib/Hero/Hero.js

@@ -3,28 +3,18 @@ import PropTypes, { element, elementType, node } from 'prop-types';
 import { Button as ButtonComponent } from '../Button';
 import Content from './Content';
 const Carousel = lazy(() =>
-  import('../vendor/EmblaCarousel/Carousel/Carousel'),
+  import('./Carousel'),
 );
 
+
 const Hero = ({
   classNames = {},
-  title,
-  subTitle,
-  imageUrl,
   hasOverlay,
-  NextImage,
   slides,
-  Button = () => (
-    <ButtonComponent
-      displayText="Shop Now"
-      onClick={() => {
-        alert('You clicked me');
-      }}
-    />
-  ),
+  Button
 }) => {
-  const isSlider = slides !== undefined;
 
+  const isSlider = slides.length > 1
   return (
     <>
       {isSlider ? (
@@ -37,7 +27,7 @@ const Hero = ({
                   classNames={classNames}
                   subTitle={slide.subTitle}
                   Button={Button}
-                  NextImage={NextImage}
+                  Image={slide.imageComponent}
                   imageUrl={slide.imageUrl}
                   hasOverlay={hasOverlay}
                 />
@@ -47,12 +37,12 @@ const Hero = ({
         </Suspense>
       ) : (
         <Content
-          title={title}
+          title={slides[0].title}
           classNames={classNames}
-          subTitle={subTitle}
+          subTitle={slides[0].subTitle}
           Button={Button}
-          NextImage={NextImage}
-          imageUrl={imageUrl}
+          imageUrl={slides[0].imageUrl}
+          Image={slides[0].imageComponent}
           hasOverlay={hasOverlay}
         />
       )}
@@ -71,39 +61,19 @@ Hero.propTypes = {
     featureTitle: PropTypes.string,
     featureSubtitle: PropTypes.string,
   }),
-  /**
-   * Title of Hero component
-   * e.g. `Hello world`
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Subtitle of Hero component
-   * e.g. `How to make you feel good`
-   */
-  subTitle: PropTypes.string.isRequired,
-  /**
-   * Hero image URL
-   * e.g. `https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80`
-   */
-  imageUrl: PropTypes.string.isRequired,
   /**
    * Boolean that toggles the overlay
    * e.g. `true`
    */
   hasOverlay: PropTypes.bool,
-  /**
-   * Next.js Image optimizer component
-   * e.g. `import Image from 'next/image'`
-   */
-  NextImage: PropTypes.elementType,
   /**
    * React Button component
    * e.g. `<ButtonComponent
-   *                     displayText="Shop Now"
-   *                     onClick={() => {
-   *                       alert('You clicked me');
-   *                     }}
-   *                   />`
+   *        displayText="Shop Now"
+   *         onClick={() => {
+   *          alert('You clicked me');
+   *         }}
+   *       />`
    */
   Button: PropTypes.elementType.isRequired,
   /**
@@ -112,9 +82,26 @@ Hero.propTypes = {
    */
   slides: PropTypes.arrayOf(
     PropTypes.shape({
-      title: PropTypes.string,
-      subTitle: PropTypes.string,
-      imageUrl: PropTypes.string,
+      /**
+       * Custom Image optimizer component
+       * e.g. `import Image from 'next/image'`
+       */
+      imageComponent: PropTypes.elementType,
+      /**
+       * Title of Hero component
+       * e.g. `Hello world`
+       */
+      title: PropTypes.string.isRequired,
+      /**
+       * Subtitle of Hero component
+       * e.g. `How to make you feel good`
+       */
+      subTitle: PropTypes.string.isRequired,
+      /**
+       * Hero image URL
+       * e.g. `https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80`
+       */
+      imageUrl: PropTypes.string ,
     }),
   ),
 };