mirror of
https://github.com/beilunyang/moemail.git
synced 2026-05-28 11:41:45 +08:00
refactor(shared-error-page): update error page to use translation keys for dynamic content
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user