75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
description?: string
|
|
link?: string
|
|
target?: '_self' | '_blank'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
target: '_blank',
|
|
})
|
|
|
|
const componentTag = computed((): string => {
|
|
switch (props.target) {
|
|
case '_self':
|
|
return 'AtomsLocaleLink'
|
|
case '_blank':
|
|
return 'a'
|
|
default:
|
|
return 'a'
|
|
}
|
|
})
|
|
|
|
const componentProps = computed(() => {
|
|
if (props.target === '_self') {
|
|
return {
|
|
to: props.link,
|
|
}
|
|
}
|
|
|
|
if (props.target === '_blank') {
|
|
return {
|
|
href: props.link,
|
|
target: props.target,
|
|
rel: 'noopener noreferrer',
|
|
}
|
|
}
|
|
|
|
return {}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap items-end justify-between mb-[16px] 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] shrink-0"
|
|
>
|
|
<span>{{ props.title }}</span>
|
|
</h3>
|
|
<div class="flex items-center justify-between w-full">
|
|
<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>
|
|
<component
|
|
:is="componentTag"
|
|
v-else-if="props.description && props.link"
|
|
v-bind="componentProps"
|
|
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"
|
|
>
|
|
<span>{{ props.description }}</span>
|
|
<AtomsIconsWebLinkLine
|
|
v-if="props.target === '_blank'"
|
|
:size="20"
|
|
color="#3C75FF"
|
|
class="icon"
|
|
/>
|
|
</component>
|
|
</div>
|
|
</div>
|
|
</template>
|