card
This commit is contained in:
Your Name
parent
5394a1282b
commit
1e49157a3a
|
|
@ -0,0 +1,195 @@
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
|
||||||
|
function getByPath(obj, path) {
|
||||||
|
if (!path) return undefined;
|
||||||
|
const parts = String(path).split(".");
|
||||||
|
let cur = obj;
|
||||||
|
for (const p of parts) {
|
||||||
|
if (cur == null) return undefined;
|
||||||
|
cur = cur[p];
|
||||||
|
}
|
||||||
|
return cur;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveStyleToken(styleKey, tokens) {
|
||||||
|
const key = styleKey || "";
|
||||||
|
const [group, name] = key.split(".");
|
||||||
|
if (!group || !name) return {};
|
||||||
|
const groupObj = tokens?.[group];
|
||||||
|
return groupObj?.[name] ?? {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function ClampText({ text, maxLines }) {
|
||||||
|
if (!maxLines || maxLines <= 0) return <span>{text}</span>;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "-webkit-box",
|
||||||
|
WebkitLineClamp: maxLines,
|
||||||
|
WebkitBoxOrient: "vertical",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function LayerView({ layer, ctx, themeTokens, onAction }) {
|
||||||
|
const common = {
|
||||||
|
position: "absolute",
|
||||||
|
left: layer.x,
|
||||||
|
top: layer.y,
|
||||||
|
width: layer.w || "auto",
|
||||||
|
height: layer.h || "auto",
|
||||||
|
borderRadius: layer.radius ?? undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const styleToken = resolveStyleToken(layer.style, themeTokens);
|
||||||
|
const clickable = !!layer.action;
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (!layer.action || !onAction) return;
|
||||||
|
const resolved = layer.action.bind
|
||||||
|
? getByPath(ctx, layer.action.bind)
|
||||||
|
: layer.action.value;
|
||||||
|
onAction(layer.action, resolved);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (layer.type === "text") {
|
||||||
|
const value = layer.bind ? getByPath(ctx, layer.bind) : layer.text;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...common,
|
||||||
|
...styleToken,
|
||||||
|
overflow: "hidden",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
cursor: clickable ? "pointer" : "default",
|
||||||
|
}}
|
||||||
|
onClick={clickable ? handleClick : undefined}
|
||||||
|
>
|
||||||
|
<ClampText text={String(value ?? "")} maxLines={layer.maxLines || 0} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layer.type === "chip") {
|
||||||
|
const value = layer.bind ? getByPath(ctx, layer.bind) : layer.text;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...common,
|
||||||
|
...styleToken,
|
||||||
|
display: "inline-flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
padding: "6px 10px",
|
||||||
|
cursor: clickable ? "pointer" : "default",
|
||||||
|
}}
|
||||||
|
onClick={clickable ? handleClick : undefined}
|
||||||
|
>
|
||||||
|
{String(value ?? "")}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layer.type === "image") {
|
||||||
|
const src = layer.bind ? getByPath(ctx, layer.bind) : undefined;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...common,
|
||||||
|
...styleToken,
|
||||||
|
backgroundImage: src ? `url(${src})` : undefined,
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
cursor: clickable ? "pointer" : "default",
|
||||||
|
}}
|
||||||
|
onClick={clickable ? handleClick : undefined}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layer.type === "button") {
|
||||||
|
const label = layer.bind ? getByPath(ctx, layer.bind) : layer.text;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
style={{
|
||||||
|
...common,
|
||||||
|
...styleToken,
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
{String(label ?? "Open")}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layer.type === "icon") {
|
||||||
|
const value = layer.bind ? getByPath(ctx, layer.bind) : layer.text;
|
||||||
|
return <div style={{ ...common, ...styleToken }}>{String(value ?? "•")}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CardRenderer({
|
||||||
|
spec,
|
||||||
|
data,
|
||||||
|
themeTokens,
|
||||||
|
onAction,
|
||||||
|
className = "",
|
||||||
|
}) {
|
||||||
|
const ctx = useMemo(() => ({ data }), [data]);
|
||||||
|
|
||||||
|
const bgStyle = useMemo(() => {
|
||||||
|
const bg = spec?.background || {};
|
||||||
|
if (bg.type === "solid") {
|
||||||
|
return { background: themeTokens.colors?.[bg.value] ?? bg.value };
|
||||||
|
}
|
||||||
|
if (bg.type === "gradient") {
|
||||||
|
return { background: themeTokens.gradients?.[bg.value] ?? bg.value };
|
||||||
|
}
|
||||||
|
if (bg.type === "image") {
|
||||||
|
const url = bg.bind ? getByPath(ctx, bg.bind) : undefined;
|
||||||
|
return url
|
||||||
|
? {
|
||||||
|
backgroundImage: `url(${url})`,
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
}
|
||||||
|
: { background: themeTokens.colors?.surface ?? "#111" };
|
||||||
|
}
|
||||||
|
return { background: themeTokens.colors?.surface ?? "#111" };
|
||||||
|
}, [spec, themeTokens, ctx]);
|
||||||
|
|
||||||
|
if (!spec) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={className}
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
width: spec.size.w,
|
||||||
|
height: spec.size.h,
|
||||||
|
borderRadius: spec.radius ?? themeTokens.radius?.card ?? 18,
|
||||||
|
overflow: "hidden",
|
||||||
|
boxShadow: themeTokens.shadow?.card,
|
||||||
|
...bgStyle,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{spec.layers.map((layer) => (
|
||||||
|
<LayerView
|
||||||
|
key={layer.id}
|
||||||
|
layer={layer}
|
||||||
|
ctx={ctx}
|
||||||
|
themeTokens={themeTokens}
|
||||||
|
onAction={onAction}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import CardRenderer from "../Cards/CardRenderer";
|
||||||
|
import { cardTokens } from "../../theme/cardTokens";
|
||||||
|
|
||||||
|
// Spec NEWS (mini) identique à celui en DB (pour demo local)
|
||||||
|
const NEWS_MINI_SPEC = {
|
||||||
|
size: { w: 280, h: 110 },
|
||||||
|
background: { type: "gradient", value: "newsBlue" },
|
||||||
|
radius: 18,
|
||||||
|
layers: [
|
||||||
|
{ id: "badge", type: "chip", x: 14, y: 12, text: "NEWS", style: "chip.news" },
|
||||||
|
{ id: "title", type: "text", x: 14, y: 40, w: 252, h: 44, bind: "data.headline", style: "text.title", maxLines: 2 },
|
||||||
|
{ id: "meta", type: "text", x: 14, y: 88, w: 252, h: 16, bind: "data.source", style: "text.meta", maxLines: 1 }
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function PostCardTemplate({ post, theme = "blue", onOpen }) {
|
||||||
|
// Adaptation depuis ton objet post actuel vers data_json style template
|
||||||
|
const data = useMemo(() => {
|
||||||
|
return {
|
||||||
|
headline: post.title || "Untitled",
|
||||||
|
source: post.author ? `by ${post.author}` : (post.sub_category || ""),
|
||||||
|
summary: post.snippet || post.body || "",
|
||||||
|
url: post.url || "",
|
||||||
|
image: post.image || post.media_url || "",
|
||||||
|
};
|
||||||
|
}, [post]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||||
|
<CardRenderer
|
||||||
|
spec={NEWS_MINI_SPEC}
|
||||||
|
data={data}
|
||||||
|
themeTokens={cardTokens[theme] || cardTokens.blue}
|
||||||
|
onAction={(action, value) => {
|
||||||
|
if (action.type === "open_url" && value) window.open(value, "_blank");
|
||||||
|
}}
|
||||||
|
className=""
|
||||||
|
/>
|
||||||
|
{onOpen && (
|
||||||
|
<button
|
||||||
|
onClick={() => onOpen(post)}
|
||||||
|
style={{
|
||||||
|
marginLeft: 10,
|
||||||
|
borderRadius: 999,
|
||||||
|
padding: "8px 12px",
|
||||||
|
border: "1px solid rgba(148,163,184,.7)",
|
||||||
|
background: "rgba(15,23,42,.7)",
|
||||||
|
color: "#e5e7eb",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontWeight: 800,
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Open
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
export const cardTokens = {
|
||||||
|
dark: {
|
||||||
|
colors: {
|
||||||
|
surface: "#101218",
|
||||||
|
text: "#E9EEF8",
|
||||||
|
muted: "#A9B3C7",
|
||||||
|
accent: "#4EA1FF",
|
||||||
|
danger: "#FF4D4D",
|
||||||
|
},
|
||||||
|
gradients: {
|
||||||
|
newsBlue: "linear-gradient(135deg, rgba(78,161,255,0.35), rgba(16,18,24,1))",
|
||||||
|
},
|
||||||
|
radius: { card: 18 },
|
||||||
|
shadow: { card: "0 10px 30px rgba(0,0,0,0.35)" },
|
||||||
|
text: {
|
||||||
|
title: { color: "#E9EEF8", fontSize: 16, fontWeight: 800, lineHeight: "20px" },
|
||||||
|
meta: { color: "#A9B3C7", fontSize: 12, fontWeight: 600 },
|
||||||
|
h1: { color: "#E9EEF8", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
|
||||||
|
body: { color: "#D7DEED", fontSize: 14, fontWeight: 600, lineHeight: "18px" },
|
||||||
|
},
|
||||||
|
chip: {
|
||||||
|
news: { background: "rgba(78,161,255,0.18)", color: "#CFE6FF", fontWeight: 800, fontSize: 12, borderRadius: 999 },
|
||||||
|
danger: { background: "rgba(255,77,77,0.18)", color: "#FFD1D1", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
primary: { background: "rgba(78,161,255,0.22)", color: "#E9EEF8", fontWeight: 900, borderRadius: 14 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
blue: {
|
||||||
|
colors: {
|
||||||
|
surface: "#071225",
|
||||||
|
text: "#E9EEF8",
|
||||||
|
muted: "#B5C7E6",
|
||||||
|
accent: "#38bdf8",
|
||||||
|
danger: "#FF4D4D",
|
||||||
|
},
|
||||||
|
gradients: {
|
||||||
|
newsBlue: "linear-gradient(135deg, rgba(56,189,248,0.35), rgba(7,18,37,1))",
|
||||||
|
},
|
||||||
|
radius: { card: 18 },
|
||||||
|
shadow: { card: "0 10px 30px rgba(0,0,0,0.40)" },
|
||||||
|
text: {
|
||||||
|
title: { color: "#F0F7FF", fontSize: 16, fontWeight: 900, lineHeight: "20px" },
|
||||||
|
meta: { color: "#B5C7E6", fontSize: 12, fontWeight: 700 },
|
||||||
|
h1: { color: "#F0F7FF", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
|
||||||
|
body: { color: "#D7E9FF", fontSize: 14, fontWeight: 700, lineHeight: "18px" },
|
||||||
|
},
|
||||||
|
chip: {
|
||||||
|
news: { background: "rgba(56,189,248,0.18)", color: "#D7F3FF", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||||
|
danger: { background: "rgba(255,77,77,0.18)", color: "#FFD1D1", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
primary: { background: "rgba(56,189,248,0.22)", color: "#F0F7FF", fontWeight: 900, borderRadius: 14 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
light: {
|
||||||
|
colors: {
|
||||||
|
surface: "#FFFFFF",
|
||||||
|
text: "#0B1220",
|
||||||
|
muted: "#5B677A",
|
||||||
|
accent: "#1E6BFF",
|
||||||
|
danger: "#D1001F",
|
||||||
|
},
|
||||||
|
gradients: {
|
||||||
|
newsBlue: "linear-gradient(135deg, rgba(30,107,255,0.20), rgba(255,255,255,1))",
|
||||||
|
},
|
||||||
|
radius: { card: 18 },
|
||||||
|
shadow: { card: "0 10px 24px rgba(0,0,0,0.12)" },
|
||||||
|
text: {
|
||||||
|
title: { color: "#0B1220", fontSize: 16, fontWeight: 900, lineHeight: "20px" },
|
||||||
|
meta: { color: "#5B677A", fontSize: 12, fontWeight: 700 },
|
||||||
|
h1: { color: "#0B1220", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
|
||||||
|
body: { color: "#1A2740", fontSize: 14, fontWeight: 600, lineHeight: "18px" },
|
||||||
|
},
|
||||||
|
chip: {
|
||||||
|
news: { background: "rgba(30,107,255,0.12)", color: "#0B1220", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||||
|
danger: { background: "rgba(209,0,31,0.10)", color: "#0B1220", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
primary: { background: "rgba(30,107,255,0.14)", color: "#0B1220", fontWeight: 900, borderRadius: 14 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue