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

"use client"
import { createStory } from "app/lib/create"
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 StoryForm from "app/ui/forms/story";


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

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Create new story</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>New story</DialogTitle>
          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
        </DialogHeader>
        <StoryForm createStory={createStory} genres={genres} existingData={null} />
        <DialogFooter>
          <Button form="storyform">Submit</Button>
        </DialogFooter>

      </DialogContent>
    </Dialog>
  )
}