Merged in feat/SW-1443-card-gallery-destination-overview (pull request #1362)

feat(SW-1443): added cardGallery block to destination overview page instead of carousel functionality

* feat(SW-1443): added cardGallery block to destination overview page instead of carousel functionality


Approved-by: Fredrik Thorsson

components/TabFilters/index.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import styles from "./tabFilters.module.css"
+
+import type { CardGalleryFilter } from "@/types/enums/cardGallery"
+import type { CarouselCardFilter } from "@/types/enums/carouselCards"
+
+interface Filter {
+  identifier: CarouselCardFilter | CardGalleryFilter
+  label: string
+}
+
+interface TabFiltersProps {
+  categories: Array<Filter>
+  selectedFilter: Filter["identifier"]
+  onFilterSelect: (filter: Filter["identifier"]) => void
+}
+
+export default function TabFilters({
+  categories,
+  selectedFilter,
+  onFilterSelect,
+}: TabFiltersProps) {
+  return (
+    <div className={styles.container}>
+      {categories.map((category) => (
+        <button
+          key={category.identifier}
+          onClick={() => onFilterSelect(category.identifier)}
+          className={
+            selectedFilter === category.identifier
+              ? styles.filterSelected
+              : styles.filter
+          }
+          type="button"
+        >
+          {category.label}
+        </button>
+      ))}
+    </div>
+  )
+}

components/TabFilters/tabFilters.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  gap: var(--Spacing-x1);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.filter,
+.filterSelected {
+  border-radius: var(--Corner-radius-Rounded);
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  transition: all 0.2s ease-in-out;
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  font-size: var(--typography-Caption-Bold-Mobile-fontSize);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.filter {
+  color: var(--UI-Text-High-contrast);
+  background: transparent;
+  border: 1px solid var(--UI-Input-Controls-Border-Hover);
+}
+
+.filterSelected {
+  color: var(--Base-Text-Inverted);
+  background: var(--Base-Button-Tertiary-Fill-Normal);
+  border: 1px solid transparent;
+}