Merge commit '40dc7f0e409841a51946ac4f00aecbdc67be0a9e' into feature/20260130_cl_SWV-812

layers/components/blocks/Button/SlideArrows.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PageDataResourceGroups } from '#layers/types/api/pageData'
+
+interface Props {
+  arrowsData?: PageDataResourceGroups
+}
+
+const props = defineProps<Props>()
+
+const { locale } = useI18n()
+const { sendLog } = useAnalytics()
+
+const getArrowBgColor = (direction: 'prev' | 'next') => {
+  return getColorCodeFromData(
+    props.arrowsData?.[direction === 'prev' ? 0 : 1]?.display,
+    'none'
+  )
+}
+
+const handleArrowClick = (direction: 'prev' | 'next') => {
+  if (props.arrowsData) {
+    const arrowIndex = direction === 'prev' ? 0 : 1
+    sendLog(locale.value, props.arrowsData[arrowIndex]?.tracking)
+  }
+}
+</script>
+
+<template>
+  <div class="splide__arrows">
+    <AtomsButtonCircle
+      sr-only="Previous"
+      class="splide-arrow splide__arrow--prev"
+      :style="{ backgroundColor: getArrowBgColor('prev') }"
+      @click="handleArrowClick('prev')"
+    >
+      <AtomsIconsArrowRightLine color="#ffffff" />
+    </AtomsButtonCircle>
+    <AtomsButtonCircle
+      sr-only="Next"
+      class="splide-arrow splide__arrow--next"
+      :style="{ backgroundColor: getArrowBgColor('next') }"
+      @click="handleArrowClick('next')"
+    >
+      <AtomsIconsArrowRightLine color="#ffffff" />
+    </AtomsButtonCircle>
+  </div>
+</template>