github.com/uchennaokeke444/nomad@v0.11.8/website/components/case-study-carousel/index.jsx (about)

     1  import { useState } from 'react'
     2  import { isIE } from 'react-device-detect'
     3  
     4  import Carousel from 'nuka-carousel'
     5  import CaseSlide from './case-study-slide'
     6  import Image from '@hashicorp/react-image'
     7  import InlineSvg from '@hashicorp/react-inline-svg'
     8  import ActiveControlDot from './img/active-control-dot.svg?include'
     9  import InactiveControlDot from './img/inactive-control-dot.svg?include'
    10  import LeftArrow from './img/left-arrow-control.svg?include'
    11  import RightArrow from './img/right-arrow-control.svg?include'
    12  
    13  export default function CaseStudyCarousel({
    14    caseStudies,
    15    title,
    16    featuredLogos
    17  }) {
    18    const [slideIndex, setSlideIndex] = useState(0)
    19    const caseStudySlides = caseStudies.map(caseStudy => (
    20      <CaseSlide key={caseStudy.quote} caseStudy={caseStudy} />
    21    ))
    22    function renderControls() {
    23      return (
    24        <div className="carousel-controls">
    25          {caseStudies.map((caseStudy, stableIdx) => {
    26            return (
    27              <button
    28                key={caseStudy.quote}
    29                className="carousel-controls-button"
    30                onClick={() => setSlideIndex(stableIdx)}
    31              >
    32                <InlineSvg
    33                  src={
    34                    slideIndex === stableIdx
    35                      ? ActiveControlDot
    36                      : InactiveControlDot
    37                  }
    38                />
    39              </button>
    40            )
    41          })}
    42        </div>
    43      )
    44    }
    45  
    46    function sideControls(icon, direction) {
    47      return (
    48        <button className="side-control" onClick={direction}>
    49          <InlineSvg src={icon} />
    50        </button>
    51      )
    52    }
    53  
    54    return (
    55      <section className="g-case-carousel">
    56        <h2 className="g-type-display-2">{title}</h2>
    57        {!isIE ? (
    58          <Carousel
    59            cellAlign="left"
    60            wrapAround={true}
    61            heightMode="current"
    62            slideIndex={slideIndex}
    63            slidesToShow={1}
    64            autoGenerateStyleTag
    65            renderBottomCenterControls={() => renderControls()}
    66            renderCenterLeftControls={({ previousSlide }) => {
    67              return sideControls(LeftArrow, previousSlide)
    68            }}
    69            renderCenterRightControls={({ nextSlide }) => {
    70              return sideControls(RightArrow, nextSlide)
    71            }}
    72            afterSlide={slideIndex => setSlideIndex(slideIndex)}
    73          >
    74            {caseStudySlides}
    75          </Carousel>
    76        ) : null}
    77        <div className="background-section">
    78          <div className="mono-logos">
    79            {featuredLogos.map(featuredLogo => (
    80              <Image
    81                key={featuredLogo.url}
    82                url={featuredLogo.url}
    83                alt={featuredLogo.companyName}
    84              />
    85            ))}
    86          </div>
    87        </div>
    88      </section>
    89    )
    90  }