improve genres popover

src/app/tailwind.css

@@ -969,6 +969,10 @@ body {
   border-radius: calc(var(--radius) - 4px);
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -993,6 +997,10 @@ body {
   border-color: hsl(var(--primary));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-accent {
   background-color: hsl(var(--accent));
 }
@@ -1103,6 +1111,21 @@ body {
   padding-bottom: 1rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1382,6 +1405,14 @@ body {
   background-color: hsl(var(--secondary) / 0.8);
 }
 
+.hover\:bg-destructive\/80:hover {
+  background-color: hsl(var(--destructive) / 0.8);
+}
+
+.hover\:bg-primary\/80:hover {
+  background-color: hsl(var(--primary) / 0.8);
+}
+
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }

src/app/ui/forms/story.tsx

@@ -17,7 +17,15 @@ import {
 import { Input } from "@/components/ui/input"
 import { Checkbox } from "@/components/ui/checkbox"
 import { toast } from "@/components/ui/use-toast"
-import * as Popover from '@radix-ui/react-popover';
+
+
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { Badge } from "lucide-react"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -51,6 +59,7 @@ export default function StoryForm({ genres }) {
 	}
 
 
+
 	function onErrors(errors) {
 		toast({
 			title: "You have errors",
@@ -63,6 +72,7 @@ export default function StoryForm({ genres }) {
 		console.log(JSON.stringify(errors))
 	}
 
+
 	return (
 		<Form {...form}>
 			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
@@ -79,6 +89,7 @@ export default function StoryForm({ genres }) {
 						</FormItem>
 					)}
 				/>
+
 				<FormField
 					control={form.control}
 					name="word_count"
@@ -92,20 +103,30 @@ export default function StoryForm({ genres }) {
 						</FormItem>
 					)}
 				/>
-				<Popover.Root>
+
-					<Popover.Trigger>
-						Genres
-					</Popover.Trigger>
-					<Popover.Content>
 				<FormField
 					control={form.control}
 					name="genres"
-							render={() => (
+					render={({ field }) => (
-								<FormItem>
+						<FormItem className="flex flex-col">
-									<div className="mb-4">
+							<Popover>
+								<PopoverTrigger asChild>
+									<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>
-										<FormDescription>Specify relevant genres</FormDescription>
+										)}
-									</div>
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent>
 									{genres.map((item) => (
 										<FormField
 											key={item.id}
@@ -139,12 +160,13 @@ export default function StoryForm({ genres }) {
 											}}
 										/>
 									))}
+								</PopoverContent>
+							</Popover>
+
 							<FormMessage />
 						</FormItem>
 					)}
 				/>
-					</Popover.Content>
-				</Popover.Root>
 
 				<Button type="submit">Submit</Button>
 			</form>