46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { TrackingObject } from '#layers/types/api/common'
|
|
|
|
interface Props {
|
|
bgColor?: string
|
|
tracking: TrackingObject
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { locale } = useI18n()
|
|
const { sendLog } = useAnalytics()
|
|
|
|
const handlePlayClick = () => {
|
|
sendLog(locale.value, props.tracking)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="btn-play"
|
|
:style="{ backgroundColor: props.bgColor }"
|
|
@click="handlePlayClick"
|
|
>
|
|
<span class="icon">
|
|
<AtomsIconsArrowRightFill />
|
|
</span>
|
|
<span class="sr-only">Play</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-play {
|
|
@apply relative flex items-center justify-center rounded-full w-[60px] h-[60px] md:w-[80px] md:h-[80px]
|
|
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
|
|
hover:after:opacity-10;
|
|
}
|
|
.btn-play:hover .icon {
|
|
@apply scale-[1.08];
|
|
}
|
|
.icon {
|
|
@apply transition-transform duration-300 ease-spring;
|
|
}
|
|
</style>
|