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