scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1542-carousel-functionality (pull request #1311)

Browse Source 
feat(SW-1542): Carousel component

* feat(SW-1542): add Embla Carousel component and use in CarouselCards

* fix(SW-1542): remove max-width constraint for card on ipad

* fix(SW-1542): Add padding to start page content container

* refactor(SW-1542): Improve Embla Carousel type imports

* refactor(SW-1542): Remove unnecessary carousel wrapper div

* refactor(SW-1542): Modularize Carousel component structure

* refactor(SW-1542): Remove carousel dots display

* feat(SW-1542): Add carousel dots navigation

* refactor(SW-1542): Update Carousel component styling and types

* refactor(SW-1542): Remove uneeded useCallback from Carousel navigation methods

* refactor(SW-1542): Modify CarouselContextProps type to exclude className

* refactor(SW-1542): Optimize React imports in Carousel components

* refactor(SW-1542): Consolidate Carousel component and remove CarouselRoot

* refactor(SW-1542): Update Carousel navigation methods to use function-based scroll checks

* refactor(SW-1542): Add explicit children prop support to CarouselContent component

* refactor(SW-1542): Add children prop support to CarouselItem component


Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-02-14 10:53:14 +00:00
parent 224a41ec74
commit 38cce4b136
14 changed files with 441 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/Blocks/CarouselCards/index.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from "react"
import { Carousel } from "@/components/Carousel"
import ContentCard from "@/components/ContentCard"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
@@ -43,19 +44,24 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
onFilterSelect={setActiveFilter}
/>
)}
{/* Carousel functionality will go here */}
<div className={styles.cardsContainer}>
{filteredCards.map((card) => (
<ContentCard
key={card.heading}
heading={card.heading}
image={card.image}
bodyText={card.bodyText}
promoText={card.promoText}
link={card.link}
/>
))}
</div>
<Carousel>
<Carousel.Content>
{filteredCards.map((card, index) => (
<Carousel.Item key={`${card.heading}-${index}`}>
<ContentCard
heading={card.heading}
image={card.image}
bodyText={card.bodyText}
promoText={card.promoText}
link={card.link}
/>
</Carousel.Item>
))}
</Carousel.Content>
<Carousel.Previous className={styles.navigationButton} />
<Carousel.Next className={styles.navigationButton} />
<Carousel.Dots />
</Carousel>
<SectionLink link={link} variant="mobile" />
</SectionContainer>
)