add: layout

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
2026-05-21 11:48:04 +08:00
parent 8454d8bcf3
commit 5241f0f1dd
13 changed files with 657 additions and 507 deletions
@@ -9,6 +9,7 @@ import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ArrowLeft } from 'lucide-react';
export default function CreateTaskList() {
const navigate = useNavigate();
@@ -43,76 +44,84 @@ export default function CreateTaskList() {
};
return (
<div className="max-w-xl mx-auto py-8 px-4">
<Card>
<CardHeader>
<CardTitle>Create Task List</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
<div className="mx-auto">
<div className="flex items-center gap-3 mb-6">
<Button type="button" variant="ghost" size="icon" onClick={() => navigate('/admin/taskList')}>
<ArrowLeft className="h-4 w-4" />
</Button>
<div>
<h1 className="text-xl font-semibold">Create Task List</h1>
<p className="text-sm text-muted-foreground">View course information.</p>
</div>
</div>
<Card className="lg:w-2xl">
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
{/* Name */}
<div className="space-y-1">
<Label htmlFor="name">Name *</Label>
<Input
id="name"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder="e.g. Onboarding Tasks"
/>
{errors.name && (
<p className="text-xs text-destructive">{errors.name}</p>
)}
</div>
{/* Name */}
<div className="space-y-3">
<Label htmlFor="name">Name *</Label>
<Input
id="name"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder="e.g. Onboarding Tasks"
/>
{errors.name && (
<p className="text-xs text-destructive">{errors.name}</p>
)}
</div>
{/* Description */}
<div className="space-y-1">
<Label htmlFor="description">Description</Label>
<Textarea
id="description"
value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })}
placeholder="Optional description"
rows={3}
/>
</div>
{/* Description */}
<div className="space-y-3">
<Label htmlFor="description">Description</Label>
<Textarea
id="description"
value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })}
placeholder="Optional description"
rows={3}
/>
</div>
{/* Groups */}
<div className="space-y-1">
<Label>
Assign to Groups
<span className="ml-1.5 text-xs text-muted-foreground font-normal">
(optional)
</span>
</Label>
<GroupMultiSelect
value={selectedGroupIds}
onChange={setSelectedGroupIds}
disabled={loading}
placeholder="Select groups to assign…"
/>
<p className="text-xs text-muted-foreground">
Members of selected groups will be able to see and complete this task list.
</p>
</div>
{/* Groups */}
<div className="space-y-3">
<Label>
Assign to Groups
<span className="ml-1.5 text-xs text-muted-foreground font-normal">
(optional)
</span>
</Label>
<GroupMultiSelect
value={selectedGroupIds}
onChange={setSelectedGroupIds}
disabled={loading}
placeholder="Select groups to assign…"
/>
<p className="text-xs text-muted-foreground">
Members of selected groups will be able to see and complete this task list.
</p>
</div>
{/* Actions */}
<div className="flex gap-2 justify-end pt-2">
<Button
type="button"
variant="outline"
onClick={() => navigate('/admin/taskList')}
>
Cancel
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Creating…' : 'Create Task List'}
</Button>
</div>
{/* Actions */}
<div className="flex gap-2 justify-end pt-2">
<Button
type="button"
variant="outline"
onClick={() => navigate('/admin/taskList')}
>
Cancel
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Creating…' : 'Create Task List'}
</Button>
</div>
</form>
</CardContent>
</Card>
</div>
</form>
</CardContent>
</Card>
</div>
</div >
);
}