79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
export const ogImageSize = { width: 1200, height: 630 };
|
|
|
|
type OgImageContentProps = {
|
|
visualSrc: string;
|
|
};
|
|
|
|
/** Gemeinsames Layout für Open-Graph- und X/Twitter-Vorschauen. */
|
|
export function OgImageContent({ visualSrc }: OgImageContentProps) {
|
|
return (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
backgroundColor: "#f7f4ed",
|
|
fontFamily: "Arial, sans-serif",
|
|
}}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- next/image is unsupported inside next/og's ImageResponse (Satori) rendering */}
|
|
<img
|
|
src={visualSrc}
|
|
alt=""
|
|
width={1200}
|
|
height={630}
|
|
style={{ display: "flex", position: "absolute", inset: 0, width: "100%", height: "100%" }}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
position: "absolute",
|
|
inset: 0,
|
|
width: 705,
|
|
backgroundImage: "linear-gradient(90deg, rgba(247,244,237,0.98) 0%, rgba(247,244,237,0.92) 78%, rgba(247,244,237,0) 100%)",
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
position: "relative",
|
|
flexDirection: "column",
|
|
width: 650,
|
|
padding: "63px 0 58px 76px",
|
|
color: "#111412",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center", fontSize: 40, fontWeight: 700, letterSpacing: -1.5 }}>
|
|
<span>Entscheid</span>
|
|
<span style={{ color: "#0d7a57", fontFamily: "Georgia, serif", fontStyle: "italic", fontWeight: 400 }}>omat</span>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", marginTop: 78, fontSize: 66, lineHeight: 1.04, fontWeight: 700, letterSpacing: -3.2 }}>
|
|
<span>Lass den</span>
|
|
<span>
|
|
<span style={{ color: "#0d7a57", fontFamily: "Georgia, serif", fontStyle: "italic", fontWeight: 400, marginRight: 16 }}>Zufall</span>entscheiden.
|
|
</span>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", marginTop: 27, color: "#4c5c54", fontSize: 24, lineHeight: 1.35 }}>
|
|
Münze werfen, Glücksrad drehen, würfeln & mehr.
|
|
</div>
|
|
|
|
<div style={{ display: "flex", marginTop: "auto", alignItems: "center" }}>
|
|
<div style={{ display: "flex", padding: "12px 20px", borderRadius: 999, backgroundColor: "#0d7a57", color: "#ffffff", fontSize: 18, fontWeight: 700, letterSpacing: 1.2 }}>
|
|
7 TOOLS · KOSTENLOS · OHNE ANMELDUNG
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", position: "absolute", right: 540, bottom: 34, color: "#405249", fontSize: 16, fontWeight: 700, letterSpacing: 0.4 }}>
|
|
entscheidomat.com
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|