feat: add create lesson UI

2026-09-08 20:39:30 +07:00
parent b55e7f97c9
commit 7bc3cf4e73
14 changed files with 1534 additions and 46 deletions
@@ -0,0 +1,110 @@
+import { Card } from '../../../components/ui/card';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import { Textarea } from '../../../components/ui/textarea';
+import { HiOutlineDocumentText, HiOutlineHashtag, HiOutlineArrowPath } from 'react-icons/hi2';
+
+function LessonMetadataForm({ metadata, onChange }) {
+  const handleChange = (field, value) => {
+    onChange({ ...metadata, [field]: value });
+  };
+
+  const generateSlug = () => {
+    const slug = metadata.title
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/đ/g, 'd')
+      .replace(/[^a-z0-9\s-]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/-+/g, '-')
+      .trim();
+    handleChange('slug', slug);
+  };
+
+  return (
+    <Card className="rounded-xl border border-app-border bg-white overflow-hidden" style={{ boxShadow: 'rgba(0,0,0,0.03) 0px 4px 24px' }}>
+      <div className="p-5">
+        <div className="flex items-center justify-between pb-4 mb-4 border-b border-app-border">
+          <div className="flex items-center gap-2">
+            <HiOutlineDocumentText className="w-5 h-5 text-app-primary" />
+            <h2 className="text-lg font-semibold text-app-text">Lesson Metadata</h2>
+          </div>
+          <span className="text-xs font-mono text-app-text-muted uppercase tracking-wider bg-app-surface-muted px-2 py-0.5 rounded">
+            schema: lessons
+          </span>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
+          <div className="md:col-span-4">
+            <Label className="mb-1.5 block text-app-text text-xs font-semibold uppercase tracking-wider">
+              Lesson Title <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              placeholder="VD: 1.1 Khái niệm cơ bản..."
+              value={metadata.title}
+              onChange={(e) => handleChange('title', e.target.value)}
+              className="rounded-xl bg-app-surface-muted border-0 focus:bg-white focus:ring-2 focus:ring-app-primary"
+            />
+          </div>
+
+          <div className="md:col-span-2">
+            <Label className="mb-1.5 block text-app-text text-xs font-semibold uppercase tracking-wider">
+              Position
+            </Label>
+            <div className="relative">
+              <HiOutlineHashtag className="absolute left-3 top-2.5 w-4 h-4 text-app-text-muted" />
+              <Input
+                type="number"
+                value={metadata.position}
+                onChange={(e) => handleChange('position', e.target.value)}
+                className="pl-9 rounded-xl bg-app-surface-muted border-0 focus:bg-white focus:ring-2 focus:ring-app-primary"
+              />
+            </div>
+          </div>
+
+          <div className="md:col-span-6">
+            <div className="flex items-center justify-between mb-1.5">
+              <Label className="block text-app-text text-xs font-semibold uppercase tracking-wider">
+                Slug
+              </Label>
+              <button
+                type="button"
+                onClick={generateSlug}
+                className="text-app-primary hover:underline text-xs font-medium flex items-center gap-1"
+              >
+                <HiOutlineArrowPath className="w-3.5 h-3.5" />
+                Auto-generate from title
+              </button>
+            </div>
+            <div className="flex rounded-xl overflow-hidden bg-app-surface-muted">
+              <span className="px-4 py-2 text-app-text-muted font-mono text-sm bg-app-border/30 flex items-center select-none">
+                /lessons/
+              </span>
+              <Input
+                value={metadata.slug}
+                onChange={(e) => handleChange('slug', e.target.value)}
+                className="border-0 bg-transparent font-mono focus:ring-0 focus:bg-transparent"
+              />
+            </div>
+          </div>
+
+          <div className="md:col-span-6">
+            <Label className="mb-1.5 block text-app-text text-xs font-semibold uppercase tracking-wider">
+              Description & Learning Objectives
+            </Label>
+            <Textarea
+              placeholder="Mô tả tóm tắt nội dung bài học, kết quả mong đợi của học viên..."
+              rows={3}
+              value={metadata.description}
+              onChange={(e) => handleChange('description', e.target.value)}
+              className="rounded-xl bg-app-surface-muted border-0 focus:bg-white focus:ring-2 focus:ring-app-primary resize-none"
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default LessonMetadataForm;