60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<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'
|
|
) ?? 'var(--primary)'
|
|
)
|
|
}
|
|
|
|
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"
|
|
:bg-color="getArrowBgColor('prev')"
|
|
@click="handleArrowClick('prev')"
|
|
>
|
|
<AtomsIconsArrowRightLine color="#ffffff" />
|
|
</AtomsButtonCircle>
|
|
<AtomsButtonCircle
|
|
sr-only="Next"
|
|
class="splide-arrow splide__arrow--next"
|
|
:bg-color="getArrowBgColor('next')"
|
|
@click="handleArrowClick('next')"
|
|
>
|
|
<AtomsIconsArrowRightLine color="#ffffff" />
|
|
</AtomsButtonCircle>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.splide__arrow--prev:hover :deep(.icon) {
|
|
@apply -translate-x-[3px];
|
|
}
|
|
|
|
.splide__arrow--next:hover :deep(.icon) {
|
|
@apply translate-x-[3px];
|
|
}
|
|
</style>
|