Function EditCategories

apps/web/components/admin/EditCategories.tsx:19–92

({
  categories,
}: {
  categories: {
    id: string;
    category: string;
  }[];
})

import { useRouter } from "next/navigation";

const EditCategories = ({
  categories,
}: {
  categories: {
    id: string;
    category: string;
  }[];
}) => {
  const router = useRouter();
  const [newCategory, setNewCategory] = useState<string>("");
  async function handleAddCategory() {
    if (!newCategory) {
      toast({
        title: "Category cannot be empty",
        description: "Please enter a category",
      });
      return;
    }
    toast({
      title: "Adding category",
    });
    try {
      await addCategory(newCategory);
      router.refresh();
      toast({
        title: "Category added",
        description: `Category ${newCategory} added`,
      });
    } catch (error) {
      toast({
        title: "Error adding category",
      });
    }
  }
  async function handleDeleteCategory(categoryId: string) {
    toast({
      title: "Deleting category",
    });
    try {
      await deleteCategory(categoryId);
      router.refresh();
      toast({
        title: "Category deleted",
      });
    } catch (error) {
      toast({
        title: "Error deleting category",
      });
    }
  }
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Edit categories</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <div className="grid gap-4 py-4">
          {categories.map((category) => (