Add admin UI to review and promote created lessons

2026-06-29 14:10:55 +00:00
parent a772c23559
commit 2e20f54513
1 changed files with 71 additions and 0 deletions
@@ -0,0 +1,71 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface Row {
+  id: number;
+  subject: string;
+  level: string;
+  status: string;
+  slug: string;
+  emoji: string;
+}
+
+export default function AdminCreations({ review, ready }: { review: Row[]; ready: Row[] }) {
+  const router = useRouter();
+  const [busy, setBusy] = useState<number | null>(null);
+
+  async function act(id: number, action: "approve" | "block" | "promote") {
+    setBusy(id);
+    try {
+      await fetch(`/api/admin/create/${id}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action }),
+      });
+      router.refresh();
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (review.length === 0 && ready.length === 0) {
+    return <p className="muted" style={{ padding: 16, margin: 0 }}>No creations awaiting review.</p>;
+  }
+
+  return (
+    <div style={{ padding: 12 }}>
+      {review.length > 0 && (
+        <>
+          <strong>Awaiting review</strong>
+          <div className="stack" style={{ marginTop: 8, marginBottom: 16 }}>
+            {review.map((r) => (
+              <div key={r.id} className="row" style={{ justifyContent: "space-between", alignItems: "center", border: "1px solid var(--line)", borderRadius: 10, padding: "8px 12px" }}>
+                <span>{r.emoji} <strong>{r.subject}</strong> <span className="muted" style={{ fontSize: "0.82rem" }}>· {r.level}</span></span>
+                <span className="row" style={{ gap: 6 }}>
+                  <button className="btn" style={mini} disabled={busy === r.id} onClick={() => act(r.id, "approve")}>✓ Approve</button>
+                  <button className="btn danger" style={mini} disabled={busy === r.id} onClick={() => act(r.id, "block")}>Block</button>
+                </span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+      {ready.length > 0 && (
+        <>
+          <strong>Ready — promote to everyone?</strong>
+          <div className="stack" style={{ marginTop: 8 }}>
+            {ready.map((r) => (
+              <div key={r.id} className="row" style={{ justifyContent: "space-between", alignItems: "center", border: "1px solid var(--line)", borderRadius: 10, padding: "8px 12px" }}>
+                <span>{r.emoji} <strong>{r.subject}</strong> <span className="muted" style={{ fontSize: "0.82rem" }}>· {r.level}</span></span>
+                <button className="btn secondary" style={mini} disabled={busy === r.id} onClick={() => act(r.id, "promote")}>🌟 Promote to global</button>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+const mini: React.CSSProperties = { minHeight: 34, padding: "6px 12px", fontSize: "0.85rem", boxShadow: "none" };