add rudimentary popover for checkboxes

src/app/ui/forms/story.tsx

@@ -92,63 +92,59 @@ export default function StoryForm({ genres }) {
 						</FormItem>
 					)}
 				/>
-				{
-					// <Popover.Root>
-					// 	<Popover.Trigger>
-					// 		Genres
-					// 	</Popover.Trigger>
-					// 	<Popover.Content>
-				}
-				<FormField
-					control={form.control}
-					name="genres"
-					render={() => (
-						<FormItem>
-							<div className="mb-4">
-								<FormLabel>Genres</FormLabel>
-								<FormDescription>Specify relevant genres</FormDescription>
-							</div>
-							{genres.map((item) => (
-								<FormField
-									key={item.id}
-									control={form.control}
-									name="genres"
-									render={({ field }) => {
-										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>
-										)
-									}}
-								/>
-							))}
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				{
-					// 	</Popover.Content>
-					// </Popover.Root>
-				}
+				<Popover.Root>
+					<Popover.Trigger>
+						Genres
+					</Popover.Trigger>
+					<Popover.Content>
+						<FormField
+							control={form.control}
+							name="genres"
+							render={() => (
+								<FormItem>
+									<div className="mb-4">
+										<FormLabel>Genres</FormLabel>
+										<FormDescription>Specify relevant genres</FormDescription>
+									</div>
+									{genres.map((item) => (
+										<FormField
+											key={item.id}
+											control={form.control}
+											name="genres"
+											render={({ field }) => {
+												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>
+												)
+											}}
+										/>
+									))}
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</Popover.Content>
+				</Popover.Root>
 
 				<Button type="submit">Submit</Button>
 			</form>