src/app/publication/create/page.tsx

@@ -1,6 +1,5 @@
 import PubForm from "app/ui/forms/pub";
-import { getGenres } from "app/lib/get";
+
-export default async function Page() {
+export default function Page() {
-	const genres = await getGenres()
+	return <PubForm />
-	return <PubForm genres={genres} />
 }

src/app/ui/forms/pub.tsx

@@ -1,136 +1,11 @@
-"use client"
+export default async function PubForm() {
-
+	return <form>
-import { z } from "zod"
+		<label htmlFor="title">Title:</label>
-import { zodResolver } from "@hookform/resolvers/zod"
+		<input type="text" id="title" />
-import { useForm } from "react-hook-form"
+		<label htmlFor="link">Link:</label>
-import { Button } from "@/components/ui/button"
+		<input type="text" id="link" />
-import {
+		<label htmlFor="number" id="query-after" >Query after (days):</label>
-	Form,
+		<input type="number" step="30" />
-	FormControl,
+		<input type="submit" value="Submit" />
-	FormDescription,
+	</form>
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { toast } from "@/components/ui/use-toast"
-
-import {
-	Popover,
-	PopoverContent,
-} from "@/components/ui/popover"
-import GenresTrigger from "./genresTrigger"
-import GenreCheckbox from "./genreCheckbox"
-
-const formSchema = z.object({
-	title: z.string().min(2).max(50),
-	link: z.string(),
-	query_after_days: z.number().min(30),
-	genres: z.array(z.number()),
-})
-
-export default function PubForm({ genres }) {
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
-		defaultValues: {
-			title: "",
-			link: "",
-			query_after_days: 30,
-			genres: []
-		},
-	})
-
-	function onSubmit(values: z.infer<typeof formSchema>) {
-		// Do something with the form values.
-		// ✅ This will be type-safe and validated.
-		toast({
-			title: "You submitted the following values:",
-			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
-				</pre>
-			),
-		})
-		console.log(values)
-	}
-
-	function onErrors(errors) {
-		toast({
-			title: "You have errors",
-			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-				</pre>
-			),
-		})
-		console.log(JSON.stringify(errors))
-	}
-
-
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit, onErrors)}>
-				<FormField
-					control={form.control}
-					name="title"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Title</FormLabel>
-							<FormControl>
-								<Input placeholder="title goes here..." {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-				<FormField
-					control={form.control}
-					name="link"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Website</FormLabel>
-							<FormControl>
-								<Input placeholder="url to the submissions page" {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-				<FormField
-					control={form.control}
-					name="genres"
-					render={({ field }) => (
-						<FormItem className="flex flex-col">
-							<Popover>
-								<GenresTrigger value={field.value} genres={genres} />
-								<PopoverContent>
-									{genres.map((item) => (
-										<FormField
-											key={item.id}
-											control={form.control}
-											name="genres"
-											render={({ field }) => {
-												return (
-													<GenreCheckbox field={field} item={item} />
-												)
-											}}
-										/>
-									))}
-								</PopoverContent>
-							</Popover>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-
-
-				<Button type="submit">Submit</Button>
-			</form>
-		</Form>
-
-	)
 }

src/app/ui/forms/story.tsx

@@ -3,6 +3,7 @@
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
+import { Genre } from "@prisma/client"
 import { Button } from "@/components/ui/button"
 import {
 	Form,
@@ -14,18 +15,23 @@ import {
 	FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
 import { toast } from "@/components/ui/use-toast"
 
 import {
 	Popover,
 	PopoverContent,
+	PopoverTrigger,
 } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { Badge } from "lucide-react"
 import GenresTrigger from "./genresTrigger"
+import GenresPopoverContent from "./genresPopoverContent"
 import GenreCheckbox from "./genreCheckbox"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
-	word_count: z.coerce.number().min(100),
+	word_count: z.coerce.number(),
 	genres: z.array(z.number())
 })