wip: course layout and func to context

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-05-16 11:05:04 +08:00
parent dcf5f43fd5
commit 2b1955608d
38 changed files with 3086 additions and 9 deletions
@@ -0,0 +1,66 @@
+// components/generic/CMS/BlockList.jsx
+
+import { BlockWrapper } from "./BlockWrapper";
+import { TextBlock } from "./Blocks/TextBlock";
+import { ImageBlock } from "./Blocks/ImageBlock";
+import { TextImageBlock } from "./Blocks/TextImageBlock";
+import { VideoBlock } from "./Blocks/VideoBlock";
+import { TextVideoBlock } from "./Blocks/TextVideoBlock";
+
+// ─── Block renderer ───────────────────────────────────────────────────────────
+
+function BlockContent({ type, content, onUpdate }) {
+    switch (type) {
+        case "text":       return <TextBlock       content={content} onUpdate={onUpdate} />;
+        case "image":      return <ImageBlock      content={content} onUpdate={onUpdate} />;
+        case "text-image": return <TextImageBlock  content={content} onUpdate={onUpdate} />;
+        case "video":      return <VideoBlock      content={content} onUpdate={onUpdate} />;
+        case "text-video": return <TextVideoBlock  content={content} onUpdate={onUpdate} />;
+        default:           return <p className="text-sm text-muted-foreground">Unknown block type.</p>;
+    }
+}
+
+// ─── Default content per type ─────────────────────────────────────────────────
+
+export const DEFAULT_CONTENT = {
+    "text":       { body: "" },
+    "image":      { asset_id: null, url: "", alt: "" },
+    "text-image": { body: "", asset_id: null, url: "", alt: "", image_position: "right" },
+    "video":      { asset_id: null, url: "", thumbnail_url: "" },
+    "text-video": { body: "", asset_id: null, url: "", thumbnail_url: "", video_position: "right" },
+};
+
+// ─── List ─────────────────────────────────────────────────────────────────────
+
+export function BlockList({ blocks, onUpdate, onMove, onDelete }) {
+    if (!blocks.length) {
+        return (
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/20 py-16 gap-2">
+                <p className="text-sm text-muted-foreground">No blocks yet.</p>
+                <p className="text-xs text-muted-foreground">Use the button below to add your first block.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            {blocks.map((block, index) => (
+                <BlockWrapper
+                    key={block.id}
+                    type={block.type}
+                    index={index}
+                    total={blocks.length}
+                    onMoveUp={()     => onMove(block.id, "up")}
+                    onMoveDown={()   => onMove(block.id, "down")}
+                    onDelete={()     => onDelete(block.id)}
+                >
+                    <BlockContent
+                        type={block.type}
+                        content={block.content}
+                        onUpdate={(updated) => onUpdate(block.id, updated)}
+                    />
+                </BlockWrapper>
+            ))}
+        </div>
+    );
+}