```ts
``\`

"use client";

const NewTaskForm = () => {
  const [error, setError] = useState<string | undefined>();
  const [success, setSuccess] = useState<string | undefined>();
  const [isPending, startTransition] = useTransition();
  const form = useForm<z.infer<typeof TaskSchema>>({
    resolver: zodResolver(TaskSchema),
    defaultValues: {
      title: "",
      description: "",
    },
  });
  // TODO: continue the action for createTask
  const onSubmit = (values: z.infer<typeof TaskSchema>) => {
    setError("");
    setSuccess("");
    startTransition(() => {
      createTask(values)
        .then((data) => {
          if (data?.error) {
            form.reset();
            setError(data.error);
          }
          if (data?.success) {
            form.reset();
            setSuccess(data.success);
          }
        })
        .catch(() => setError("Something went wrong!"));
    });
  };
  return (

    
      <Form {...form}>
        <form
          action=""
          onSubmit={form.handleSubmit(onSubmit)}
          className="flex flex-col "
        >
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Title</FormLabel>
                <FormControl>
                  <Input
                    {...field}
                    disabled={isPending}
                    placeholder="Wash the dishes"
            
       
            control={form.control}
            name="description"
            render={({ field }) => (
            
              Description</FormLabel>
          
                  <Input
                    {...field}
                    disabled={isPending}
                    placeholder="3 plates, 4 spoons, and 5 mugs!"
                  />
                </FormControl>
     
          />
          but
            type="submit"
            disabled={isPending}
      
            Create Task
        

import { currentUser } from "@/lib/auth";
import { getTasks } from "@/services/taskServices";
import TaskCard from "./_components/TaskCard";
import { Task } from "@prisma/client";

const TasksPage = async () => {
  const user = await currentUser();
  if (!user || !user.id) return null;
  const userTasks = await getTasks(user?.id);

  return (
    <div className="w-full h-full grid grid-cols-4 grid-rows-3 gap-4 p-4">
      {userTasks.map((task: Task) => (
        <TaskCard key={task.id} task={task} />
      ))}
    </div>
  );
};

export default TasksPage;

import { Task } from "@prisma/client";

const TaskCard = ({ task }: { task: Task }) => {
  return (
    <div className="bg-gray-100 rounded-md p-3 w-[200px] h-[100px]">
      <h1 className="text-xl">{task.title}</h1>
      <h6>{task.description}</h6>
      <p className="text-gray-500">{task.createdAt.toDateString()}</p>
    </div>
  );
};

export default TaskCard;