add radix components to publication create form

src/app/publication/create/page.tsx

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

src/app/ui/forms/pub.tsx

@@ -1,11 +1,136 @@
-export default async function PubForm() {
-	return <form>
-		<label htmlFor="title">Title:</label>
-		<input type="text" id="title" />
-		<label htmlFor="link">Link:</label>
-		<input type="text" id="link" />
-		<label htmlFor="number" id="query-after" >Query after (days):</label>
-		<input type="number" step="30" />
-		<input type="submit" value="Submit" />
+"use client"
+
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	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,7 +3,6 @@
 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,
@@ -15,23 +14,18 @@ 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(),
+	word_count: z.coerce.number().min(100),
 	genres: z.array(z.number())
 })