feat: create criteria form

This commit is contained in:
mehedi-hasan 2024-05-01 18:48:27 +06:00
parent 339a45c946
commit 328514ff7b
4 changed files with 137 additions and 5 deletions

View File

@ -0,0 +1,26 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import AddCriteriaForm from "@/components/add-criteria-form";
export default function SettingsDisplayPage() {
return (
<ScrollArea className="h-[calc(100vh-53px)]">
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
<Card className="max-w-[700px] w-full">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Create Criteria
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<AddCriteriaForm />
</CardContent>
</Card>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -0,0 +1,106 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input";
import { Textarea } from "./ui/textarea";
const displayFormSchema = z.object({
name: z.string().trim().min(1, "Name is required."),
description: z.string().trim().min(1, "Description is required."),
prompt: z.string().trim().min(1, "Prompt is required."),
});
type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API.
const defaultValues: Partial<DisplayFormValues> = {
name: "",
description: "",
prompt: "",
};
export default function AddCriteriaForm() {
const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema),
defaultValues,
});
function onSubmit(data: DisplayFormValues) {
toast({
title: "You submitted the following values:",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
</pre>
),
});
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Enter Name..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Textarea placeholder="Enter description..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="prompt"
render={({ field }) => (
<FormItem>
<FormLabel>Prompt</FormLabel>
<FormControl>
<Textarea placeholder="Enter prompt..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-center gap-4">
<Button className="w-full" size="lg">
Create
</Button>
<Button variant="secondary" className="w-full" size="lg">
Create and add another
</Button>
</div>
</form>
</Form>
);
}

View File

@ -24,17 +24,17 @@ const ToolsTable = ({
title={`Courses (${courseAdmin.length})`}
description="Manage Courses"
/>
<Link
<div></div>
{/* <Link
href="#"
className={buttonVariants({
variant: "default",
// size: "sm",
})}
// className="text-xs md:text-sm"
// onClick={() => router.push(`/admin-dashboard/tools/add`)}
>
<Plus className="mr-2 h-4 w-4" /> Add Course
</Link>
</Link> */}
</div>
<Separator />
<DataTable data={courseAdmin} columns={columns} />

View File

@ -19,7 +19,7 @@ const ToolsTable = ({ criteriaData }: { criteriaData: Criteria[] }) => {
description="Manage Criteria"
/>
<Link
href="#"
href="/dashboard/criteria/add"
className={buttonVariants({
variant: "default",
// size: "sm",