1
0
Fork 0
panel/components/common/CreateCase.tsx

55 lines
1.6 KiB
TypeScript

"use client";
import { Plus } from "lucide-react";
import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Label } from "../ui/label";
import { Input } from "../ui/input";
import { useState } from "react";
import { createCase } from "@/lib/db";
import { useRouter } from "next/navigation";
export function CreateCase() {
const [title, setTitle] = useState("");
const router = useRouter();
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="icon">
<Plus className="h-4 w-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="font-medium leading-none">Create Case</h4>
</div>
<div className="grid gap-2">
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="description">Title</Label>
<Input
id="description"
className="col-span-2 h-8"
value={title}
onChange={(e) => setTitle(e.currentTarget.value)}
/>
</div>
<Button
variant="secondary"
onClick={() => {
if (!title) return;
createCase(title).then((id) =>
router.push(`/panel/cases/${id}`)
);
}}
>
Create
</Button>
</div>
</div>
</PopoverContent>
</Popover>
);
}