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

This commit is contained in:
beilunyang
2025-10-22 00:58:37 +08:00
parent 7398b73f3f
commit 1ffe920d47
6 changed files with 62 additions and 60 deletions

View File

@@ -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>
)
}