Merged in refactor/SW-1669-carousel-cards-shadow (pull request #1370)

Refactor(SW-1669): Carousel Cards Enhancements

* feat(SW-1669): Enhance Filters component with scroll shadows and heart icon

* feat(SW-1669): Carousel peek next card

* fix(SW-1669): carousel review comments

* feat(SW-1669): Add left scroll shadow to TabFilters component

* refactor(SW-1669): Simplify TabFilters shadow styling

* refactor(SW-1669): Adjust TabFilters shadow width

* refactor(SW-1699): Remove unused import from enter details store


Approved-by: Christian Andolf

components/TabFilters/index.tsx

@@ -1,5 +1,10 @@
 "use client"
 
+import { cx } from "class-variance-authority"
+
+import { HeartIcon } from "@/components/Icons"
+import useScrollShadows from "@/hooks/useScrollShadows"
+
 import styles from "./tabFilters.module.css"
 
 import type { CardGalleryFilter } from "@/types/enums/cardGallery"
@@ -21,22 +26,36 @@ export default function TabFilters({
   selectedFilter,
   onFilterSelect,
 }: TabFiltersProps) {
+  const { containerRef, showLeftShadow, showRightShadow } =
+    useScrollShadows<HTMLDivElement>()
+
   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
+      className={cx(
+        styles.containerWrapper,
+        showLeftShadow && styles.showLeftShadow,
+        showRightShadow && styles.showRightShadow
+      )}
+    >
+      <div className={styles.container} ref={containerRef}>
+        {categories.map((category) => (
+          <button
+            key={category.identifier}
+            onClick={() => onFilterSelect(category.identifier)}
+            className={
+              selectedFilter === category.identifier
+                ? styles.filterSelected
+                : styles.filter
+            }
+            type="button"
+          >
+            <HeartIcon
+              color={selectedFilter === category.identifier ? "white" : "black"}
+            />
+            {category.label}
+          </button>
+        ))}
+      </div>
     </div>
   )
 }