explorer-app/components/Project/ProjectInfoItem.vue
2023-12-19 18:43:42 +01:00

99 lines
3.1 KiB
Vue

<script lang="ts" setup>
defineProps<{
header?: string
title?: string
link?: string
textSize?: string
bold?: boolean
color?: string
opacity?: number
tooltip?: string
tooltipLink?: string
checkUndefined?: any | undefined | null
}>()
const heading = ref()
const tooltipDiv = ref()
const tooltipLeftOffset = computed(() => (tooltipDiv.value?.offsetWidth / 2) - (heading.value?.offsetWidth / 2))
const mouseOverTooltip = ref(false)
const showTooltip = ref(false)
function headingMouseOut() {
setTimeout(() => mouseOverTooltip.value ? showTooltip.value = true : showTooltip.value = false, 500)
}
function tooltipMouseOver() {
mouseOverTooltip.value = true
showTooltip.value = true
}
function tooltipMouseOut() {
mouseOverTooltip.value = false
showTooltip.value = false
}
</script>
<template>
<div flex items-start relative>
<div h-full flex items-center text-32px gap-12px>
<slot name="prefix" />
<div />
</div>
<div class="peer" flex flex-col justify-center w-full>
<h3
v-if="title"
ref="heading" w-fit text="14px sm:16px app-text-grey" leading-24px
:class="[tooltip ? 'cursor-pointer underline underline-offset-5 decoration-dotted hover:decoration-solid hover:text-app-white' : '']"
@mouseover="showTooltip = true"
@mouseout="headingMouseOut()"
>
{{ title }}
</h3>
<template v-if="checkUndefined === undefined || checkUndefined === null">
<span opacity-50 leading-24px font-700 text-14px :class="`sm:text-${textSize ?? '16px'}`">{{ 'N/A' }}</span>
</template>
<template v-else>
<template v-if="link">
<div
flex gap-6px items-center justify-start hover:underline hover:text-white text-14px
:color="color ?? '#FFF'"
class="hoverEl"
:class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
leading-24px @click.prevent="navigateTo(link, { external: true, open: { target: '_blank' } })"
>
<slot />
<UnoIcon i-web-openinnew text-16px text-app-text-grey class="customHover" />
</div>
</template>
<div v-else :color="color ?? '#FFF'" text-14px :class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`" leading-24px>
<slot />
</div>
</template>
</div>
<div
v-if="tooltip"
ref="tooltipDiv"
:style="{ left: `-${tooltipLeftOffset}px` }"
:class="[showTooltip ? 'visible' : 'invisible']"
class="flex flex-col max-w-232px top-40px absolute z-100 inline-block px-3 py-2 text-14px font-400 text-app-black bg-app-white"
@mouseover="tooltipMouseOver()"
@mouseout="tooltipMouseOut()"
>
{{ tooltip }}
<NuxtLink
v-if="tooltipLink"
mt-12px text-14px font-400 leading-20px underline underline-offset-2
:to="tooltipLink"
>
{{ 'Learn More' }}
</NuxtLink>
<div w-16px h-16px absolute bg-white class="top--8px left-50% translate-x--50% rotate-45 z-99" />
</div>
</div>
</template>
<style scoped>
.hoverEl:hover .customHover {
color: #FFF;
}
</style>