abstract genre checkbox components

src/app/tailwind.css

@@ -819,6 +819,11 @@ body {
   width: 100%;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -827,10 +832,24 @@ body {
   min-width: var(--radix-select-trigger-width);
 }
 
+.min-w-fit {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
 .max-w-sm {
   max-width: 24rem;
 }
 
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }

src/app/ui/forms/genreCheckbox.tsx

@@ -0,0 +1,30 @@
+import { FormItem, FormControl, FormLabel } from "@/components/ui/form"
+import { Checkbox } from "@/components/ui/checkbox"
+export default function GenreCheckbox({ field, item }) {
+	return (
+		<FormItem
+			key={item.id}
+			className="flex flex-row items-start space-x-3 space-y-0"
+		>
+			<FormControl>
+				<Checkbox
+					checked={field.value?.includes(item.id)}
+					onCheckedChange={(checked) => {
+						return checked
+							? field.onChange([...field.value, item.id])
+							: field.onChange(
+								field.value?.filter(
+									(value) => value !== item.id
+								)
+							)
+					}}
+				/>
+			</FormControl>
+			<FormLabel className="text-sm font-normal">
+				{item.name}
+			</FormLabel>
+		</FormItem>
+
+
+	)
+}

src/app/ui/forms/genresTrigger.tsx

@@ -0,0 +1,27 @@
+import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
+import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover"
+import { Checkbox } from "@radix-ui/react-checkbox"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+export default function GenresTrigger({ value, genres }) {
+	return (
+		<>
+			<PopoverTrigger asChild>
+				<Button
+					variant={"outline"}
+					className={cn(
+						"min-w-fit max-w-screen-sm w-fit pl-3 text-left font-normal",
+						!value && "text-muted-foreground"
+					)}
+				>
+					{value.length !== 0 ? (
+						value.map((e, i) => genres.find(f => e === f.id).name +
+							(i < value.length - 1 ? ', ' : ''))
+					) : (
+						<FormLabel>Genres</FormLabel>
+					)}
+				</Button>
+			</PopoverTrigger>
+		</>
+	)
+}

src/app/ui/forms/story.tsx

@@ -18,7 +18,6 @@ import { Input } from "@/components/ui/input"
 import { Checkbox } from "@/components/ui/checkbox"
 import { toast } from "@/components/ui/use-toast"
 
-
 import {
 	Popover,
 	PopoverContent,
@@ -26,6 +25,9 @@ import {
 } 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),
@@ -110,22 +112,7 @@ export default function StoryForm({ genres }) {
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<Popover>
-								<PopoverTrigger asChild>
+								<GenresTrigger value={field.value} genres={genres} />
-									<Button
-										variant={"outline"}
-										className={cn(
-											"w-[240px] pl-3 text-left font-normal",
-											!field.value && "text-muted-foreground"
-										)}
-									>
-										{field.value.length !== 0 ? (
-										field.value.map((e,i)=>genres.find(f=>e===f.id).name+
-										( i<field.value.length-1?', ':'' ))
-										) : (
-											<FormLabel>Genres</FormLabel>
-										)}
-									</Button>
-								</PopoverTrigger>
 								<PopoverContent>
 									{genres.map((item) => (
 										<FormField
@@ -134,35 +121,13 @@ export default function StoryForm({ genres }) {
 											name="genres"
 											render={({ field }) => {
 												return (
-													<FormItem
+													<GenreCheckbox field={field} item={item} />
-														key={item.id}
-														className="flex flex-row items-start space-x-3 space-y-0"
-													>
-														<FormControl>
-															<Checkbox
-																checked={field.value?.includes(item.id)}
-																onCheckedChange={(checked) => {
-																	return checked
-																		? field.onChange([...field.value, item.id])
-																		: field.onChange(
-																			field.value?.filter(
-																				(value) => value !== item.id
-																			)
-																		)
-																}}
-															/>
-														</FormControl>
-														<FormLabel className="text-sm font-normal">
-															{item.name}
-														</FormLabel>
-													</FormItem>
 												)
 											}}
 										/>
 									))}
 								</PopoverContent>
 							</Popover>
-
 							<FormMessage />
 						</FormItem>
 					)}