Merged in feat/SW-1384-filter-functionality (pull request #1262)

feat(SW-1384): Implement filtering for CarouselCards component * feat(SW-1384): Implement filtering for CarouselCards component * fix(SW-1384): Simplify CarouselCards filters scrolling styles * refactor(SW-1384): Simplify CarouselCards filtering logic Approved-by: Christian Andolf
2025-02-06 14:32:55 +00:00
parent 3d1295e4d5
commit 7c8d6cbc2e
8 changed files with 98 additions and 23 deletions
@@ -0,0 +1,60 @@
+"use client"
+
+import { useState } from "react"
+
+import ContentCard from "@/components/ContentCard"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+
+import Filters from "./Filters"
+
+import styles from "./carouselCards.module.css"
+
+import type { CarouselCardsProps } from "@/types/components/blocks/carouselCards"
+
+export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
+  const {
+    heading,
+    enableFilters,
+    filterCategories,
+    cards,
+    defaultFilter,
+    link,
+  } = carousel_cards
+
+  const [activeFilter, setActiveFilter] = useState(
+    enableFilters ? defaultFilter : null
+  )
+
+  const filteredCards = !activeFilter
+    ? cards
+    : cards.filter(
+        (card) => "filterId" in card && card.filterId === activeFilter
+      )
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={heading} link={link} />
+      {filterCategories.length > 0 && activeFilter && (
+        <Filters
+          categories={filterCategories}
+          selectedFilter={activeFilter}
+          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>
+    </SectionContainer>
+  )
+}