389 lines
11 KiB
TypeScript
389 lines
11 KiB
TypeScript
import { Star, MapPin, Zap } from "lucide-react";
|
||
import { QRCodeSVG } from "qrcode.react";
|
||
import type { Restaurant, MatchType, SceneType } from "@/types";
|
||
import { getSceneConfig } from "@/lib/sceneConfig";
|
||
|
||
export interface RestaurantShareData {
|
||
type: "restaurant";
|
||
restaurant: Restaurant;
|
||
matchType: MatchType;
|
||
matchLikes: number;
|
||
userCount: number;
|
||
scene?: SceneType;
|
||
}
|
||
|
||
export default function RestaurantShareCard({
|
||
data,
|
||
cardRef,
|
||
imageDataUrl,
|
||
}: {
|
||
data: RestaurantShareData;
|
||
cardRef: React.RefObject<HTMLDivElement | null>;
|
||
imageDataUrl: string | null;
|
||
}) {
|
||
const { restaurant, matchType, matchLikes, userCount, scene } = data;
|
||
const isUnanimous = matchType === "unanimous";
|
||
const verb = getSceneConfig(scene ?? "eat").verb;
|
||
const shareUrl =
|
||
typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
|
||
const accentFrom = isUnanimous ? "#059669" : "#b45309";
|
||
const accentTo = isUnanimous ? "#34d399" : "#fbbf24";
|
||
const accentText = isUnanimous ? "#6ee7b7" : "#fcd34d";
|
||
const accentBg = isUnanimous
|
||
? "rgba(16, 185, 129, 0.12)"
|
||
: "rgba(245, 158, 11, 0.12)";
|
||
|
||
return (
|
||
<div
|
||
ref={cardRef}
|
||
style={{
|
||
width: 340,
|
||
padding: 1.5,
|
||
borderRadius: 20,
|
||
background: `linear-gradient(160deg, ${accentFrom}, ${accentTo}40, ${accentFrom}30)`,
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
borderRadius: 18.5,
|
||
background: "#08080a",
|
||
position: "relative",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{/* Decorative glows */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
top: -40,
|
||
right: -30,
|
||
width: 160,
|
||
height: 160,
|
||
borderRadius: "50%",
|
||
background: `radial-gradient(circle, ${accentFrom}25, transparent 70%)`,
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
bottom: 60,
|
||
left: -40,
|
||
width: 120,
|
||
height: 120,
|
||
borderRadius: "50%",
|
||
background: `radial-gradient(circle, ${accentTo}12, transparent 70%)`,
|
||
}}
|
||
/>
|
||
|
||
{/* Brand header */}
|
||
<div
|
||
style={{
|
||
padding: "14px 20px 12px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
position: "relative",
|
||
}}
|
||
>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||
<span style={{ fontSize: 18 }}>⚡</span>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 13,
|
||
fontWeight: 800,
|
||
color: "#ffffff",
|
||
letterSpacing: "0.02em",
|
||
}}
|
||
>
|
||
NoWhatever
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 9,
|
||
fontWeight: 600,
|
||
color: "rgba(255,255,255,0.35)",
|
||
letterSpacing: "0.15em",
|
||
marginTop: 1,
|
||
}}
|
||
>
|
||
别说随便 · PANIC MODE
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Thin accent line */}
|
||
<div
|
||
style={{
|
||
height: 1,
|
||
margin: "0 20px",
|
||
background: `linear-gradient(to right, transparent, ${accentTo}30, transparent)`,
|
||
}}
|
||
/>
|
||
|
||
{/* Hero section */}
|
||
<div
|
||
style={{
|
||
padding: "24px 20px 20px",
|
||
textAlign: "center",
|
||
position: "relative",
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 40, lineHeight: 1 }}>
|
||
{isUnanimous ? "🎉" : "🏆"}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 30,
|
||
fontWeight: 900,
|
||
color: "#ffffff",
|
||
marginTop: 12,
|
||
letterSpacing: "0.08em",
|
||
}}
|
||
>
|
||
就去这{verb}！
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: "inline-flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
marginTop: 12,
|
||
padding: "6px 16px",
|
||
borderRadius: 100,
|
||
background: accentBg,
|
||
border: `1px solid ${accentTo}20`,
|
||
}}
|
||
>
|
||
{isUnanimous && (
|
||
<Zap
|
||
size={12}
|
||
style={{ color: accentText, fill: accentText }}
|
||
/>
|
||
)}
|
||
<span
|
||
style={{
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
color: accentText,
|
||
}}
|
||
>
|
||
{isUnanimous
|
||
? `默契度 100% · ${userCount}人全员一致`
|
||
: `${matchLikes}/${userCount} 人选了这家`}
|
||
</span>
|
||
{isUnanimous && (
|
||
<Zap
|
||
size={12}
|
||
style={{ color: accentText, fill: accentText }}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Restaurant card */}
|
||
<div style={{ padding: "0 16px 16px" }}>
|
||
<div
|
||
style={{
|
||
borderRadius: 14,
|
||
background: "rgba(255,255,255,0.04)",
|
||
border: "1px solid rgba(255,255,255,0.06)",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{imageDataUrl && (
|
||
<img
|
||
src={imageDataUrl}
|
||
alt={restaurant.name}
|
||
style={{
|
||
width: "100%",
|
||
height: 150,
|
||
objectFit: "cover",
|
||
display: "block",
|
||
}}
|
||
/>
|
||
)}
|
||
<div style={{ padding: "14px 16px 16px" }}>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "flex-start",
|
||
justifyContent: "space-between",
|
||
gap: 8,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 17,
|
||
fontWeight: 800,
|
||
color: "#ffffff",
|
||
lineHeight: 1.3,
|
||
}}
|
||
>
|
||
{restaurant.name}
|
||
</div>
|
||
{restaurant.category && (
|
||
<span
|
||
style={{
|
||
flexShrink: 0,
|
||
padding: "3px 8px",
|
||
borderRadius: 100,
|
||
background: accentBg,
|
||
fontSize: 10,
|
||
fontWeight: 600,
|
||
color: accentText,
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{restaurant.category}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 12,
|
||
marginTop: 10,
|
||
fontSize: 12,
|
||
}}
|
||
>
|
||
{restaurant.rating > 0 && (
|
||
<span
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 3,
|
||
color: "#e5e7eb",
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
<Star
|
||
size={13}
|
||
style={{ color: "#fbbf24", fill: "#fbbf24" }}
|
||
/>
|
||
{restaurant.rating}
|
||
</span>
|
||
)}
|
||
{restaurant.price && restaurant.price !== "未知" && (
|
||
<span style={{ fontWeight: 700, color: accentText }}>
|
||
{restaurant.price}
|
||
</span>
|
||
)}
|
||
{restaurant.distance && (
|
||
<span
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 3,
|
||
color: "#9ca3af",
|
||
}}
|
||
>
|
||
<MapPin size={12} style={{ color: "#6b7280" }} />
|
||
{restaurant.distance}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{restaurant.address && (
|
||
<div
|
||
style={{
|
||
marginTop: 8,
|
||
fontSize: 11,
|
||
color: "#6b7280",
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
📍 {restaurant.address}
|
||
</div>
|
||
)}
|
||
|
||
{restaurant.tag && (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
gap: 4,
|
||
marginTop: 10,
|
||
}}
|
||
>
|
||
{restaurant.tag
|
||
.split(",")
|
||
.slice(0, 4)
|
||
.map((t) => (
|
||
<span
|
||
key={t}
|
||
style={{
|
||
padding: "2px 8px",
|
||
borderRadius: 4,
|
||
background: "rgba(255,255,255,0.05)",
|
||
fontSize: 10,
|
||
fontWeight: 500,
|
||
color: "#9ca3af",
|
||
}}
|
||
>
|
||
{t.trim()}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* QR footer */}
|
||
<div
|
||
style={{
|
||
padding: "14px 20px 16px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 14,
|
||
borderTop: "1px solid rgba(255,255,255,0.04)",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: 5,
|
||
borderRadius: 8,
|
||
background: "#ffffff",
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
<QRCodeSVG
|
||
value={shareUrl}
|
||
size={52}
|
||
level="M"
|
||
bgColor="#ffffff"
|
||
fgColor="#08080a"
|
||
/>
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div
|
||
style={{
|
||
fontSize: 12,
|
||
fontWeight: 700,
|
||
color: "rgba(255,255,255,0.7)",
|
||
}}
|
||
>
|
||
扫码一起「别说随便」
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 10,
|
||
color: "rgba(255,255,255,0.25)",
|
||
marginTop: 3,
|
||
}}
|
||
>
|
||
{shareUrl.replace(/^https?:\/\//, "")}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|