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,83 @@
+// components/generic/CMS/BlockWrapper.jsx
+
+import { GripVertical, ChevronUp, ChevronDown, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge }  from "@/components/ui/badge";
+
+const BLOCK_LABELS = {
+    "text":       "Text",
+    "image":      "Image",
+    "text-image": "Text + Image",
+    "video":      "Video",
+    "text-video": "Text + Video",
+};
+
+export function BlockWrapper({
+    type,
+    index,
+    total,
+    onMoveUp,
+    onMoveDown,
+    onDelete,
+    children,
+}) {
+    return (
+        <div className="group relative rounded-lg border bg-card transition-shadow hover:shadow-sm">
+
+            {/* ── Top toolbar ── */}
+            <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40 rounded-t-lg">
+
+                {/* Left — drag handle + block type */}
+                <div className="flex items-center gap-2">
+                    <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
+                    <Badge variant="secondary" className="text-xs">
+                        {BLOCK_LABELS[type] ?? type}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground">
+                        Block {index + 1}
+                    </span>
+                </div>
+
+                {/* Right — move + delete */}
+                <div className="flex items-center gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        disabled={index === 0}
+                        onClick={onMoveUp}
+                    >
+                        <ChevronUp className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        disabled={index === total - 1}
+                        onClick={onMoveDown}
+                    >
+                        <ChevronDown className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+                        onClick={onDelete}
+                    >
+                        <Trash2 className="h-4 w-4" />
+                    </Button>
+                </div>
+
+            </div>
+
+            {/* ── Block content ── */}
+            <div className="p-4">
+                {children}
+            </div>
+
+        </div>
+    );
+}