subman-nextjs/src/app/publication/create.tsx

"use client"
import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { ComponentProps } from "react";
import { Genre } from "@prisma/client";
import { createPub } from "app/lib/create";
import PubForm from "app/ui/forms/pub";
import { Plus } from "lucide-react";
import { useState } from "react";

export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {

  const [isOpen, setIsOpen] = useState(false)
  function closeDialog() {
    setIsOpen(false)
  }

  return (

    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button>
          <span className="hidden md:block">Create new publication</span>
          <Plus className="block md:hidden" />
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>New publication</DialogTitle>
          <DialogDescription>Create an entry for a new publication i.e. a place you intend to submit stories to.</DialogDescription>
        </DialogHeader>
        <PubForm createPub={createPub} genres={genres} closeDialog={closeDialog} />
        <DialogFooter>
          <Button form="pubform">Submit</Button>
        </DialogFooter>

      </DialogContent>
    </Dialog>
  )
}