111 lines
4.6 KiB
React
111 lines
4.6 KiB
React
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;
|