import dynamic from 'next/dynamic' import { Carousel, CarouselItem } from 'components/modules/carousel/carousel' const Card = dynamic(() => import('components/ui/card')) import Text from 'components/ui/text' interface BlurbSectionProps { blurbs: any title: string mobileLayout: string desktopLayout: string imageFormat: 'square' | 'portrait' | 'landscape' } const BlurbSection = ({ title, mobileLayout, desktopLayout, blurbs, imageFormat, }: BlurbSectionProps) => { const gridLayout = desktopLayout === '2-column' ? 'lg:grid-cols-2' : desktopLayout === '3-column' ? 'lg:grid-cols-3' : 'lg:grid-cols-4' const sliderLayout = desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4 return ( <div> {title ? ( <Text className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8" variant="sectionHeading" > {title} </Text> ) : ( <Text className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8" variant="sectionHeading" > No title provided yet </Text> )} <div className={`px-4 grid ${gridLayout} gap-x-4 gap-y-8 ${ mobileLayout === 'stacked' ? 'lg:hidden' : 'hidden' } lg:px-8 2xl:!px-16`} > {blurbs.map((blurb: object | any, index: number) => { return ( <div key={index}> <Card title={blurb?.title} link={blurb?.link} image={blurb?.image} text={blurb?.text} imageFormat={blurb?.imageFormat} /> </div> ) })} </div> <div className={`${ mobileLayout === 'stacked' ? 'hidden lg:block' : 'block' }`} > {blurbs && ( <Carousel gliderClasses={'px-4 lg:px-8 2xl:px-16'} hasDots={true} slidesToShow={2.2} responsive={{ breakpoint: 1024, settings: { slidesToShow: sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout, }, }} > {blurbs.map((blurb: any, index: number) => ( <CarouselItem key={`${index}`}> <Card title={blurb?.title} link={blurb?.link} image={blurb?.image} text={blurb.text} imageFormat={imageFormat} /> </CarouselItem> ))} </Carousel> )} </div> </div> ) } export default BlurbSection