112 lines
3.5 KiB
Vue
112 lines
3.5 KiB
Vue
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div class="text-center max-w-2xl mx-auto px-4">
|
|
<div class="mb-8">
|
|
<div class="w-24 h-24 bg-aws-orange rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<Globe class="w-12 h-12 text-white" />
|
|
</div>
|
|
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
|
{{ $t('blog.noTranslation') }}
|
|
</h1>
|
|
|
|
<p class="text-xl text-gray-600 mb-8">
|
|
{{ $t('blog.noTranslationDesc') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
<h3 class="text-lg font-semibold mb-4">Available Languages</h3>
|
|
<div class="flex flex-wrap justify-center gap-3">
|
|
<button
|
|
v-for="locale in availableLocales"
|
|
:key="locale.code"
|
|
@click="switchLanguage(locale.code)"
|
|
:class="[
|
|
'px-4 py-2 rounded-lg border-2 transition-all duration-200',
|
|
currentLocale === locale.code
|
|
? 'border-aws-orange bg-aws-orange text-white'
|
|
: 'border-gray-300 text-gray-700 hover:border-aws-orange hover:text-aws-orange'
|
|
]"
|
|
>
|
|
{{ locale.name }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<NuxtLink to="/blog" class="btn-primary">
|
|
{{ $t('blog.backToBlog') }}
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/" class="btn-outline">
|
|
Go Home
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="flex justify-center space-x-6 pt-6">
|
|
<a
|
|
href="https://t.me/pinnovatecloud"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-gray-600 hover:text-aws-orange transition-colors duration-200"
|
|
title="Contact us on Telegram"
|
|
>
|
|
<MessageCircle class="w-6 h-6" />
|
|
</a>
|
|
<a
|
|
href="https://wa.me/19174029875"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-gray-600 hover:text-aws-orange transition-colors duration-200"
|
|
title="Contact us on WhatsApp"
|
|
>
|
|
<Phone class="w-6 h-6" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Globe, MessageCircle, Phone } from 'lucide-vue-next'
|
|
|
|
const route = useRoute()
|
|
const { locale, locales, setLocale } = useI18n()
|
|
|
|
const currentLocale = ref(locale.value)
|
|
const requestedLocale = route.query.locale
|
|
const articlePath = route.query.article
|
|
|
|
const availableLocales = computed(() =>
|
|
locales.value.filter(locale => locale.code !== 'en' || locale.code === currentLocale.value)
|
|
)
|
|
|
|
const switchLanguage = async (targetLocale) => {
|
|
if (targetLocale === currentLocale.value) return
|
|
|
|
try {
|
|
await setLocale(targetLocale)
|
|
|
|
// Try to navigate to the translated article
|
|
if (articlePath) {
|
|
const translatedPath = articlePath.replace(/^\/[a-z-]+/, `/${targetLocale}`)
|
|
await navigateTo(translatedPath)
|
|
} else {
|
|
await navigateTo('/blog')
|
|
}
|
|
} catch (err) {
|
|
console.error('Error switching language:', err)
|
|
}
|
|
}
|
|
|
|
// SEO
|
|
useSeoMeta({
|
|
title: 'Translation Not Available',
|
|
description: 'This article is not available in your selected language.',
|
|
robots: 'noindex, nofollow'
|
|
})
|
|
</script>
|