eafonyang
60 lines
2.3 KiB
Vue
60 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { SectionBlock } from '~/types/site';
|
|
|
|
const props = defineProps<{ section: SectionBlock }>();
|
|
|
|
const { ctaPrimaryText, ctaSecondaryText, isDark } = useSectionContent(props.section);
|
|
const { isExternal, resolveLink } = useLinkResolver();
|
|
|
|
const primaryLink = computed(() => resolveLink(props.section.cta_primary_url));
|
|
const secondaryLink = computed(() => resolveLink(props.section.cta_secondary_url));
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="primaryLink || secondaryLink" class="flex flex-wrap items-center gap-16px">
|
|
<!-- 主 CTA -->
|
|
<template v-if="primaryLink && ctaPrimaryText">
|
|
<a
|
|
v-if="isExternal(section.cta_primary_url)"
|
|
:href="section.cta_primary_url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="px-28px py-12px rounded-full text-sm font-medium transition-all"
|
|
:class="isDark ? 'bg-white text-gray-900 hover:bg-gray-200' : 'bg-primary text-white hover:opacity-90'"
|
|
>
|
|
{{ ctaPrimaryText }}
|
|
</a>
|
|
<NuxtLink
|
|
v-else
|
|
:to="primaryLink"
|
|
class="px-28px py-12px rounded-full text-sm font-medium transition-all"
|
|
:class="isDark ? 'bg-white text-gray-900 hover:bg-gray-200' : 'bg-primary text-white hover:opacity-90'"
|
|
>
|
|
{{ ctaPrimaryText }}
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<!-- 次 CTA -->
|
|
<template v-if="secondaryLink && ctaSecondaryText">
|
|
<a
|
|
v-if="isExternal(section.cta_secondary_url)"
|
|
:href="section.cta_secondary_url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="px-28px py-12px rounded-full text-sm font-medium border transition-all"
|
|
:class="isDark ? 'border-white/40 text-white hover:bg-white/10' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary dark:border-dark-600 dark:text-gray-200'"
|
|
>
|
|
{{ ctaSecondaryText }}
|
|
</a>
|
|
<NuxtLink
|
|
v-else
|
|
:to="secondaryLink"
|
|
class="px-28px py-12px rounded-full text-sm font-medium border transition-all"
|
|
:class="isDark ? 'border-white/40 text-white hover:bg-white/10' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary dark:border-dark-600 dark:text-gray-200'"
|
|
>
|
|
{{ ctaSecondaryText }}
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</template>
|