Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

abstract genre checkbox components

This commit is contained in:
andrzej 2024-06-16 23:08:17 +02:00
parent 7a7cd39f6e
commit a650bd7183
4 changed files with 81 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/tailwind.css
View File

@ -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;
}

30
src/app/ui/forms/genreCheckbox.tsx Normal file
View File

@ -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>
)
}

27
src/app/ui/forms/genresTrigger.tsx Normal file
View File

@ -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>
</>
)
}

45
src/app/ui/forms/story.tsx
View File

@ -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>
<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>
<GenresTrigger value={field.value} genres={genres} />
<PopoverContent>
{genres.map((item) => (
<FormField
@ -134,35 +121,13 @@ export default function StoryForm({ genres }) {
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>
<GenreCheckbox field={field} item={item} />
)
}}
/>
))}
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}