feat(sharing): add email and message sharing functionality

2026-05-31 05:00:37 +08:00 · 2025-10-18 20:08:42 +08:00
parent 47d555eaf5
commit dbe8c42b11
45 changed files with 5669 additions and 38 deletions
--- a/app/components/ui/brand-header.tsx
+++ b/app/components/ui/brand-header.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import Link from "next/link"
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { ExternalLink, Mail } from "lucide-react"
+
+interface BrandHeaderProps {
+  title?: string
+  subtitle?: string
+  showCta?: boolean
+  ctaText?: string
+  ctaHref?: string
+}
+
+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}
+          className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
+        >
+          <div className="relative w-12 h-12">
+            <div className="absolute inset-0 grid grid-cols-8 grid-rows-8 gap-px">
+              <svg
+                width="48"
+                height="48"
+                viewBox="0 0 32 32"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="text-primary group-hover:scale-105 transition-transform duration-200"
+              >
+                {/* 信封主体 */}
+                <path
+                  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"
+                  className="fill-primary/40"
+                />
+              </svg>
+            </div>
+          </div>
+          <span className="text-3xl font-bold tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
+            MoeMail
+          </span>
+        </Link>
+      </div>
+
+      <div className="space-y-3">
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">
+          {displayTitle}
+        </h1>
+        <p className="text-gray-600 dark:text-gray-300 max-w-md mx-auto">
+          {displaySubtitle}
+        </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>
+  )
+}