Files
starr-philproperties/src/data/placementLayouts.data.js
T
kennethobsequio 7e964f2432 add: more commits
Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-07-03 16:21:27 +08:00

76 lines
2.7 KiB
JavaScript

// data/placementLayouts.data.js
//
// Declarative "wireframe recipe" per placement — powers <PlacementSkeleton />
// in the advertisement creation wizard so admins can see roughly where their
// ad will land before saving. Keys mirror PLACEMENTS in placement.data.js.
// Adding a new placement: add one entry here, nothing else needs to change.
//
// Block kinds:
// nav — thin top bar stand-in
// bar — a rounded block; `size` controls height (sm/md/lg/xl);
// `highlight: true` marks it as the ad slot, `label` names it
// filters — a row of small pill shapes
// grid — a row of small equal boxes (card grid stand-in)
// list — a couple of thin stacked rows (table/list stand-in)
// row — a flex row of `columns`, each rendered like a `bar`
//
// `overlay` (optional, top-level) renders the base `blocks` dimmed with a
// centered floating highlighted box on top — used for popups.
export const PLACEMENT_LAYOUTS = {
"dashboard.hero": {
blocks: [
{ kind: "nav" },
{ kind: "bar", size: "xl", highlight: true, label: "Hero" },
{ kind: "list", label: "My Groups" },
{ kind: "grid", label: "Courses" },
],
},
"dashboard.popup": {
blocks: [
{ kind: "nav" },
{ kind: "bar", size: "xl" },
{ kind: "list", label: "My Groups" },
{ kind: "grid", label: "Courses" },
],
overlay: { label: "Popup" },
},
"course_list.banner": {
blocks: [
{ kind: "nav" },
{ kind: "filters" },
{ kind: "bar", size: "md", highlight: true, label: "Banner" },
{ kind: "grid", label: "Course cards" },
],
},
"course_details.banner": {
blocks: [
{ kind: "nav" },
{ kind: "bar", size: "lg", label: "Course hero" },
{ kind: "bar", size: "sm", highlight: true, label: "Banner" },
{ kind: "row", columns: [
{ label: "Course content", width: "flex-1" },
{ label: "Sidebar", width: "w-1/4" },
] },
],
},
"course_details.sidebar": {
blocks: [
{ kind: "nav" },
{ kind: "bar", size: "lg", label: "Course hero" },
{ kind: "bar", size: "sm", label: "Banner" },
{ kind: "row", columns: [
{ label: "Course content", width: "flex-1" },
{ label: "Sidebar", width: "w-1/4", highlight: true },
] },
],
},
"plans.banner": {
blocks: [
{ kind: "nav" },
{ kind: "bar", size: "md", highlight: true, label: "Banner" },
{ kind: "grid", label: "Plan cards" },
],
},
};