refactor(shared-error-page): update error page to use translation keys for dynamic content

app/components/emails/shared-error-page.tsx

@@ -1,34 +1,48 @@
 "use client"
 
+import { useTranslations } from "next-intl"
 import { AlertCircle } from "lucide-react"
 import { Card } from "@/components/ui/card"
 import { BrandHeader } from "@/components/ui/brand-header"
 import { FloatingLanguageSwitcher } from "@/components/layout/floating-language-switcher"
 
 interface SharedErrorPageProps {
-  title: string
-  subtitle: string
-  error: string
-  description: string
-  ctaText: string
+  titleKey: string
+  subtitleKey: string
+  errorKey: string
+  descriptionKey: string
+  ctaTextKey: string
 }
 
-export function SharedErrorPage({ title, subtitle, error, description, ctaText }: SharedErrorPageProps) {
+export function SharedErrorPage({
+  titleKey,
+  subtitleKey,
+  errorKey,
+  descriptionKey,
+  ctaTextKey,
+}: SharedErrorPageProps) {
+  const tShared = useTranslations("emails.shared")
+
+  const resolvedTitle = tShared(titleKey)
+  const resolvedSubtitle = tShared(subtitleKey)
+  const resolvedError = tShared(errorKey)
+  const resolvedDescription = tShared(descriptionKey)
+  const resolvedCtaText = tShared(ctaTextKey)
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center items-center">
       <div className="container mx-auto p-4 max-w-4xl">
         <BrandHeader
-          title={title}
-          subtitle={subtitle}
-          showCta={true}
-          ctaText={ctaText}
+          title={resolvedTitle}
+          subtitle={resolvedSubtitle}
+          ctaText={resolvedCtaText}
         />
-        <div className="text-center">
+        <div className="text-center mt-6">
           <Card className="max-w-md mx-auto p-8 text-center space-y-4">
             <AlertCircle className="h-12 w-12 mx-auto text-destructive" />
-            <h2 className="text-2xl font-bold">{error}</h2>
+            <h2 className="text-2xl font-bold">{resolvedError}</h2>
             <p className="text-gray-500">
-              {description}
+              {resolvedDescription}
             </p>
           </Card>
         </div>
@@ -37,4 +51,4 @@ export function SharedErrorPage({ title, subtitle, error, description, ctaText }
       <FloatingLanguageSwitcher />
     </div>
   )
-}
+}

app/components/ui/brand-header.tsx

@@ -8,28 +8,24 @@ import { ExternalLink, Mail } from "lucide-react"
 interface BrandHeaderProps {
   title?: string
   subtitle?: string
-  showCta?: boolean
   ctaText?: string
-  ctaHref?: string
 }
 
-export function BrandHeader({ 
-  title, 
+export function BrandHeader({
+  title,
   subtitle,
-  showCta = true,
   ctaText,
-  ctaHref = "https://moemail.app"
 }: BrandHeaderProps) {
   const t = useTranslations("emails.shared.brand")
-  
+
   const displayTitle = title || t("title")
   const displaySubtitle = subtitle || t("subtitle")
   const displayCtaText = ctaText || t("cta")
   return (
     <div className="text-center space-y-4 lg:pb-4">
       <div className="flex justify-center pt-2">
-        <Link 
-          href={ctaHref}
+        <Link
+          href="https://moemail.app"
           className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
         >
           <div className="relative w-12 h-12">
@@ -47,32 +43,32 @@ export function BrandHeader({
                   d="M4 8h24v16H4V8z"
                   className="fill-primary/20"
                 />
-                
+
                 {/* 信封边框 */}
                 <path
                   d="M4 8h24v2H4V8zM4 22h24v2H4v-2z"
                   className="fill-primary"
                 />
-                
+
                 {/* @ 符号 */}
                 <path
                   d="M14 12h4v4h-4v-4zM12 14h2v4h-2v-4zM18 14h2v4h-2v-4zM14 18h4v2h-4v-2z"
                   className="fill-primary"
                 />
-                
+
                 {/* 折线装饰 */}
                 <path
                   d="M4 8l12 8 12-8"
                   className="stroke-primary stroke-2"
                   fill="none"
                 />
-                
+
                 {/* 装饰点 */}
                 <path
                   d="M8 18h2v2H8v-2zM22 18h2v2h-2v-2z"
                   className="fill-primary/60"
                 />
-                
+
                 {/* 底部装饰线 */}
                 <path
                   d="M8 14h2v2H8v-2zM22 14h2v2h-2v-2z"
@@ -96,21 +92,19 @@ export function BrandHeader({
         </p>
       </div>
 
-      {showCta && (
-        <div className="flex justify-center">
-          <Button 
-            asChild
-            size="lg"
-            className="gap-2 bg-primary hover:bg-primary/90 text-white px-8 min-h-10 h-auto py-1"
-          >
-            <Link href={ctaHref} target="_blank" rel="noopener noreferrer">
-              <Mail className="w-5 h-5" />
-              {displayCtaText}
-              <ExternalLink className="w-4 h-4" />
-            </Link>
-          </Button>
-        </div>
-      )}
+      <div className="flex justify-center">
+        <Button
+          asChild
+          size="lg"
+          className="gap-2 bg-primary hover:bg-primary/90 text-white px-8 min-h-10 h-auto py-1"
+        >
+          <Link href="/" target="_blank" rel="noopener noreferrer">
+            <Mail className="w-5 h-5" />
+            {displayCtaText}
+            <ExternalLink className="w-4 h-4" />
+          </Link>
+        </Button>
+      </div>
     </div>
   )
 }