69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { ImageResponse } from "next/og";
|
|
|
|
export const alt = "Puzzle Trainer";
|
|
export const size = { width: 1200, height: 630 };
|
|
export const contentType = "image/png";
|
|
|
|
export default function OGImage() {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%)",
|
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
}}
|
|
>
|
|
{/* Game icons row */}
|
|
<div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
|
|
{["♛", "☀", "∞", "#", "▦"].map((icon, i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
width: 72,
|
|
height: 72,
|
|
background: "#111827",
|
|
borderRadius: 16,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: 32,
|
|
color: "#f9fafb",
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
|
|
Puzzle Trainer
|
|
</div>
|
|
|
|
{/* Tagline */}
|
|
<div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
|
|
5 puzzles logiques · chaque jour
|
|
</div>
|
|
|
|
{/* URL */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 40,
|
|
fontSize: 20,
|
|
color: "#9ca3af",
|
|
}}
|
|
>
|
|
puzzles.reverdin.eu
|
|
</div>
|
|
</div>
|
|
),
|
|
{ ...size }
|
|
);
|
|
}
|