faq (#116)

* faq ui

* not found

Author: c121914yu

src/app/[lang]/faq/[id]/page.tsx

@@ -2,7 +2,7 @@ import { faq } from '@/faq';
 import { notFound } from 'next/navigation';
 import { defaultLocale, getDictionary, localeNames } from '@/lib/i18n';
 import Link from 'next/link';
-import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 import FAQCard from '@/components/faq/FAQCard';
 import { showFAQ } from '@/constants';
 
@@ -28,11 +28,6 @@ export default async function FAQDetailPage({
 
   // Get all FAQ entries
   const allFAQs = Object.entries(faq);
-  const currentIndex = allFAQs.findIndex(([key]) => key === id);
-
-  // Get previous and next FAQs
-  const prevFAQ = currentIndex > 0 ? allFAQs[currentIndex - 1] : null;
-  const nextFAQ = currentIndex < allFAQs.length - 1 ? allFAQs[currentIndex + 1] : null;
 
   // Get related FAQs (same category, excluding current)
   const relatedFAQs = allFAQs
@@ -72,50 +67,6 @@ export default async function FAQDetailPage({
         ))}
       </div>
 
-      {/* Navigation: Previous & Next */}
-      <div className="flex items-center justify-between gap-4 py-8 border-t border-b border-border mb-12">
-        <div className="flex-1">
-          {prevFAQ && (
-            <Link
-              href={`/${langName}/faq/${prevFAQ[0]}`}
-              className="group flex items-center gap-2 text-sm hover:text-primary transition-colors"
-            >
-              <ChevronLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
-              <div>
-                <div className="text-xs text-muted-foreground mb-1">
-                  {dict.FAQ?.previous || 'Previous'}
-                </div>
-                <div className="font-medium line-clamp-1">{prevFAQ[1].Question}</div>
-              </div>
-            </Link>
-          )}
-        </div>
-
-        <Link
-          href={`/${langName}/faq`}
-          className="px-4 py-2 text-sm font-medium rounded-md bg-secondary hover:bg-secondary/80 transition-colors"
-        >
-          {dict.FAQ?.backToList || 'Back to FAQ'}
-        </Link>
-
-        <div className="flex-1 flex justify-end">
-          {nextFAQ && (
-            <Link
-              href={`/${langName}/faq/${nextFAQ[0]}`}
-              className="group flex items-center gap-2 text-sm hover:text-primary transition-colors text-right"
-            >
-              <div>
-                <div className="text-xs text-muted-foreground mb-1">
-                  {dict.FAQ?.next || 'Next'}
-                </div>
-                <div className="font-medium line-clamp-1">{nextFAQ[1].Question}</div>
-              </div>
-              <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-            </Link>
-          )}
-        </div>
-      </div>
-
       {/* Related FAQs */}
       {relatedFAQs.length > 0 && (
         <section>

src/app/[lang]/not-found.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Search, Home } from 'lucide-react';
+import { showFAQ } from '@/constants';
 
 export default function NotFound() {
   // Note: We can't access params in not-found.tsx, so we'll use English as default
@@ -35,13 +36,16 @@ export default function NotFound() {
             <Home className="w-5 h-5" />
             Back to Home
           </Link>
-          <Link
-            href="/faq"
-            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium transition-colors"
-          >
-            <Search className="w-5 h-5" />
-            View FAQ
-          </Link>
+          {
+            showFAQ && <Link
+              href="/faq"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium transition-colors"
+            >
+              <Search className="w-5 h-5" />
+              View FAQ
+            </Link>
+          }
+
         </div>
 
         {/* Additional Help */}

src/app/not-found.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Search, Home } from 'lucide-react';
+import { showFAQ } from '@/constants';
 
 export default function NotFound() {
   return (
@@ -32,13 +33,16 @@ export default function NotFound() {
             <Home className="w-5 h-5" />
             Back to Home
           </Link>
-          <Link
-            href="/faq"
-            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium transition-colors"
-          >
-            <Search className="w-5 h-5" />
-            View FAQ
-          </Link>
+          {
+            showFAQ && <Link
+              href="/faq"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium transition-colors"
+            >
+              <Search className="w-5 h-5" />
+              View FAQ
+            </Link>
+          }
+
         </div>
 
         {/* Additional Help */}