import React from "react";
import { Stack } from "../primitives/Stack.jsx";
import { Inline } from "../primitives/Inline.jsx";
/* A social post: an Instagram story (9:16) or grid post (4:5 or 1:1), drawn on
an artboard at the format's native pixel size and scaled to fit its
container. A screenshot of it at full size is ready to publish.
Ten layouts share one frame so a set of posts reads as one voice: a mark and
an optional counter along the top, a handle and a call to action along the
bottom, and one type scale for everything between. Half the layouts sit on
a plain tone and half on a photograph. */
const RATIO = { story: "9 / 16", portrait: "4 / 5", square: "1 / 1" };
/* The fallbacks are the artboard sizes themselves, so a page whose copy of the
tokens predates this component still draws a post rather than a blank. */
const NATIVE_WIDTH = 1080;
const WIDTH = `var(--dt-social-width, ${NATIVE_WIDTH}px)`;
const HEIGHT = {
story: "var(--dt-social-height-story, 1920px)",
portrait: "var(--dt-social-height-portrait, 1350px)",
square: "var(--dt-social-height-square, 1080px)",
};
/* The display size steps down as the format gets shorter. */
const SCALE = { story: 1, portrait: 0.86, square: 0.74 };
function fill(bg, fg) {
return { background: bg, color: fg, "--dt-social-fg": fg, "--dt-social-muted": `color-mix(in oklab, ${fg} 76%, transparent)`, "--dt-social-rule": `color-mix(in oklab, ${fg} 24%, transparent)` };
}
const TONES = {
paper: { style: { background: "var(--dt-social-bg)", color: "var(--dt-social-fg)" } },
ink: { dark: true, style: { background: "var(--dt-social-bg)", color: "var(--dt-social-fg)" } },
brand: { style: fill("var(--dt-surface-brand)", "var(--dt-text-on-brand)") },
"brand-muted": { style: fill("var(--dt-surface-brand-muted)", "var(--dt-text-on-brand-muted)") },
secondary: { style: fill("var(--dt-surface-brand-secondary)", "var(--dt-text-on-brand-secondary)") },
};
const PICTURED = { cover: true, split: true, framed: true, card: true, poster: true };
/* useLayoutEffect warns when a page renders on the server, where it can't run.
Tested on document, not window: the bundle sets its namespace on window, so
a server that shims window to load it still has no document. */
const useIsoLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
function useScale(ref) {
const [scale, setScale] = React.useState(0);
useIsoLayoutEffect(() => {
const el = ref.current;
if (!el) return undefined;
const measure = () => {
const native = parseFloat(getComputedStyle(el).getPropertyValue("--dt-social-width")) || NATIVE_WIDTH;
setScale(el.clientWidth / native);
};
measure();
if (typeof ResizeObserver === "undefined") return undefined;
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, [ref]);
return scale;
}
const meta = {
fontFamily: "var(--dt-font-family-mono)", fontSize: "var(--dt-social-meta-size)",
letterSpacing: "var(--dt-social-meta-tracking)", textTransform: "uppercase", lineHeight: 1.2,
};
const body = { margin: 0, maxWidth: "none", fontSize: "var(--dt-social-body-size)", lineHeight: "var(--dt-social-body-line)", color: "var(--dt-social-muted)", textWrap: "pretty" };
function display(format, factor = 1) {
const k = SCALE[format] * factor;
return {
margin: 0,
color: "inherit",
fontFamily: "var(--dt-social-display-family)",
fontSize: `calc(var(--dt-social-display-size) * ${k})`,
lineHeight: `calc(var(--dt-social-display-line) * ${k})`,
fontWeight: "var(--dt-social-display-weight)",
letterSpacing: "var(--dt-social-display-tracking)",
textWrap: "balance",
};
}
function title(format, factor = 1) {
const k = SCALE[format] * factor;
return {
margin: 0,
color: "inherit",
fontFamily: "var(--dt-social-display-family)",
fontSize: `calc(var(--dt-social-title-size) * ${k})`,
lineHeight: `calc(var(--dt-social-title-line) * ${k})`,
fontWeight: "var(--dt-social-display-weight)",
letterSpacing: "var(--dt-social-display-tracking)",
textWrap: "balance",
};
}
function Picture({ image, position, label, style }) {
return image ? (
) : (
{label || "Image"}
);
}
export function SocialPost({
layout = "headline",
format = "story",
tone = "brand",
image,
imagePosition = "center",
eyebrow,
title: heading,
body: text,
meta: byline,
items = [],
badge,
brand = "Dovetail",
mark,
handle,
cta,
counter,
label,
spacing,
style,
...rest
}) {
const box = React.useRef(null);
const scale = useScale(box);
const t = TONES[tone] || TONES.brand;
const pictured = !!PICTURED[layout];
const onImage = layout === "cover" || layout === "poster" || layout === "card";
/* Everything is laid out with Stack and Inline layers, drawn at the
artboard's scale (--dt-layout-scale, set on [data-social]), so a post
follows the layout the page is set to: Configure's Spacing, Text and
Modules, or data-layout on a region around it. */
const frame = {
position: "absolute", inset: 0, zIndex: 2,
padding: "var(--dt-social-padding)",
color: onImage ? "var(--dt-social-on-image)" : undefined,
"--dt-social-muted": onImage ? "var(--dt-social-on-image-muted)" : undefined,
};
const top = (
{mark || }
{brand}
{counter && {counter}}
);
const bottom = (handle || cta) && (
{handle}
{cta && {cta}}
);
const eyebrowEl = eyebrow && {eyebrow}
;
/* An eyebrow (or badge, or mark) binds to the heading it introduces; what
follows the pair is the subcopy. */
const lead = (kicker, headingEl, ...after) => (
{kicker}{headingEl}
{after}
);
let content = null;
let background = null;
if (layout === "headline") {
content = lead(eyebrowEl, {heading}
, text && {text}
);
} else if (layout === "quote") {
content = lead(
“,
{heading}
,
byline && {byline}
);
} else if (layout === "stat") {
content = lead(
eyebrowEl,
{heading}
,
text && {text}
,
byline && {byline}
);
} else if (layout === "list") {
content = (
{eyebrowEl}{heading}
{items.map((it, i) => (
{String(i + 1).padStart(2, "0")}
{it}
))}
);
} else if (layout === "announcement") {
content = (
{badge && {badge}}
{heading}
{text && {text}
}
{byline && {byline}
}
);
} else if (layout === "cover") {
background = (
<>
);
content = lead(eyebrowEl, {heading}
, text && {text}
);
} else if (layout === "poster") {
background = (
<>
);
content = null;
} else if (layout === "card") {
background = (
<>
);
content = (
{eyebrowEl}{heading}
{text && {text}
}
);
}
const inner = (() => {
if (layout === "split") {
return (
{lead(eyebrowEl, {heading}
, text && format !== "square" && {text}
)}
{bottom}
{top}
);
}
if (layout === "framed") {
return (
{top}
{eyebrowEl}{heading}
{bottom}
);
}
if (layout === "poster") {
return (
{top}
{/* One word, set as large as its length allows without breaking it. */}
{heading}
{text && {text}
}
{bottom}
);
}
return (
{top}
{content}
{bottom || }
);
})();
return (
);
}