91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import { readFileSync } from "node:fs";
|
|
import { join } from "node:path";
|
|
|
|
const brandMark = `data:image/png;base64,${readFileSync(
|
|
join(process.cwd(), "public/brand/mark-dark.png"),
|
|
).toString("base64")}`;
|
|
|
|
export const OG_SIZE = { width: 1200, height: 630 } as const;
|
|
export const OG_CONTENT_TYPE = "image/png";
|
|
|
|
export function OgCard({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
}: {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
position: "relative",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
background: "#050505",
|
|
color: "#f4f1e8",
|
|
padding: 72,
|
|
fontFamily: "Arial, sans-serif",
|
|
}}
|
|
>
|
|
<img
|
|
src={brandMark}
|
|
alt="Evandro.dev.br"
|
|
width={80}
|
|
height={80}
|
|
style={{ position: "absolute", top: 48, right: 72 }}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
paddingRight: 112,
|
|
color: "#ccff00",
|
|
fontSize: 24,
|
|
letterSpacing: "0.16em",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
{eyebrow}
|
|
</div>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
fontSize: 64,
|
|
fontWeight: 700,
|
|
lineHeight: 1.08,
|
|
}}
|
|
>
|
|
{title}
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
maxWidth: 980,
|
|
color: "#c7c3ba",
|
|
fontSize: 28,
|
|
lineHeight: 1.35,
|
|
}}
|
|
>
|
|
{description}
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
borderTop: "1px solid #343434",
|
|
paddingTop: 24,
|
|
fontSize: 20,
|
|
letterSpacing: "0.12em",
|
|
}}
|
|
>
|
|
EVANDRO.DEV.BR / ENGENHARIA DE SOFTWARE
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|