HaoAws/app/[locale]/news/[id]/not-found.tsx

import Link from 'next/link';
import { getTranslations, Locale, getNavigationPaths } from '@/lib/i18n';
import Layout from '@/components/Layout';

export default async function NewsNotFound() {
    // Since we can't access params in not-found.tsx, we'll use the default locale
    const locale: Locale = 'zh-CN';
    const common = await getTranslations(locale, 'common');
    const navigationPaths = getNavigationPaths(locale);

    const navigation = [
        {
            name: common.navigation.home,
            href: navigationPaths.find((p) => p.key === 'home')?.path || '/',
        },
        {
            name: common.navigation.products,
            href: navigationPaths.find((p) => p.key === 'products')?.path || '/products',
        },
        {
            name: common.navigation.news,
            href: navigationPaths.find((p) => p.key === 'news')?.path || '/news',
        },
        {
            name: common.navigation.support,
            href: navigationPaths.find((p) => p.key === 'support')?.path || '/support',
        },
        {
            name: common.navigation.about,
            href: navigationPaths.find((p) => p.key === 'about')?.path || '/about',
        },
    ];

    return (
        <Layout locale={locale} navigation={navigation} common={common} data-oid="_3j68t9">
            <section
                className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 min-h-screen flex items-center"
                data-oid="byufenu"
            >
                <div className="max-w-2xl mx-auto text-center" data-oid="d7nio8r">
                    <div className="mb-8" data-oid="jsety51">
                        <div
                            className="w-24 h-24 mx-auto mb-6 bg-gray-200 rounded-full flex items-center justify-center"
                            data-oid="5ihesur"
                        >
                            <svg
                                className="w-12 h-12 text-gray-400"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                data-oid="kjp5851"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                                    data-oid="fi-bv88"
                                />
                            </svg>
                        </div>

                        <h1
                            className="text-4xl md:text-5xl font-light mb-4 text-gray-900"
                            data-oid="9oigcow"
                        >
                            404
                        </h1>

                        <h2
                            className="text-2xl md:text-3xl font-light mb-6 text-gray-700"
                            data-oid="e04ibd."
                        >
                            文章未找到
                        </h2>

                        <p
                            className="text-lg text-gray-600 mb-8 leading-relaxed"
                            data-oid="pec0pi4"
                        >
                            抱歉，您请求的新闻文章不存在，或者该文章的当前语言版本尚未提供。
                        </p>
                    </div>

                    <div className="space-y-4" data-oid="zq.yd55">
                        <p className="text-gray-600 mb-6" data-oid="lq5sfie">
                            可能的原因：
                        </p>

                        <ul
                            className="text-left text-gray-600 space-y-2 mb-8 max-w-md mx-auto"
                            data-oid="hwob-h0"
                        >
                            <li className="flex items-start space-x-2" data-oid="z.xttum">
                                <span className="text-blue-600 mt-1" data-oid="ivn4wke">
                                    •
                                </span>
                                <span data-oid="uvhrz0m">文章链接已过期或不正确</span>
                            </li>
                            <li className="flex items-start space-x-2" data-oid="49u2bhz">
                                <span className="text-blue-600 mt-1" data-oid="e6cgf9o">
                                    •
                                </span>
                                <span data-oid="1vzafpj">该文章尚未翻译成当前语言</span>
                            </li>
                            <li className="flex items-start space-x-2" data-oid="ooz29p4">
                                <span className="text-blue-600 mt-1" data-oid="w99sjj5">
                                    •
                                </span>
                                <span data-oid="yl74i72">文章已被移除或归档</span>
                            </li>
                        </ul>

                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="nz.s4ql"
                        >
                            <Link
                                href={
                                    navigationPaths.find((p) => p.key === 'news')?.path || '/news'
                                }
                                className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
                                data-oid="c45-.pd"
                            >
                                返回新闻列表
                            </Link>

                            <Link
                                href={navigationPaths.find((p) => p.key === 'home')?.path || '/'}
                                className="bg-gray-100 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-200 transition-colors font-light"
                                data-oid="vzzstbf"
                            >
                                返回首页
                            </Link>
                        </div>
                    </div>

                    <div className="mt-12 pt-8 border-t border-gray-200" data-oid="y88ceui">
                        <p className="text-sm text-gray-500" data-oid="bu7u61n">
                            如果您认为这是一个错误，请联系我们的技术支持团队。
                        </p>
                    </div>
                </div>
            </section>
        </Layout>
    );
}