53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { TrackingObject } from '#layers/types/api/common'
|
|
|
|
interface Props {
|
|
title: string
|
|
description?: string
|
|
link?: string
|
|
target?: '_self' | '_blank'
|
|
linkAnalytics?: TrackingObject
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
target: '_blank',
|
|
})
|
|
|
|
const { locale } = useI18n()
|
|
const { sendLog } = useAnalytics()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-between gap-3 mb-[16px] md:gap-6 md:mb-[24px]">
|
|
<h3
|
|
class="text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
|
|
>
|
|
<span>{{ props.title }}</span>
|
|
</h3>
|
|
<div class="flex items-center justify-between shrink-0">
|
|
<slot />
|
|
<p
|
|
v-if="props.description && !props.link"
|
|
class="text-[#666666] text-[13px] font-[400] leading-[22px] tracking-[-0.325px] md:text-[14px] md:leading-[24px] md:tracking-[-0.421px]"
|
|
>
|
|
{{ props.description }}
|
|
</p>
|
|
<AtomsLocaleLink
|
|
v-else-if="props.description && props.link"
|
|
:to="props.link"
|
|
:target="props.target"
|
|
class="relative flex items-center justify-center gap-[4px] w-auto h-auto text-[#3C75FF] text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-0 before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
|
|
@click="sendLog(locale, props.linkAnalytics)"
|
|
>
|
|
<span>{{ props.description }}</span>
|
|
<AtomsIconsWebLinkLine
|
|
v-if="props.target === '_blank'"
|
|
:size="20"
|
|
color="#3C75FF"
|
|
class="icon"
|
|
/>
|
|
</AtomsLocaleLink>
|
|
</div>
|
|
</div>
|
|
</template>
|