Popover

import { Button } from "@/components/jk/button"
import { Input, Label } from "@/components/jk/input"
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle } from "@/components/jk/popover"


export const PopoverDemo = () => {
    return (
        <>
            <Popover>
                <Button variant="outline">
                    Show Popover
                </Button>
                <PopoverContent className={"[--popover-padding:--spacing(4)]"}>
                    <div className="grid gap-4">
                        <PopoverHeader className="space-y-2">
                            <PopoverTitle>Dimensions</PopoverTitle>
                            <PopoverDescription>
                                Set the dimensions for the layer.
                            </PopoverDescription>
                        </PopoverHeader>
                        <div className="grid gap-2">
                            <div className="grid grid-cols-3 items-center gap-4">
                                <Label htmlFor="width">Width</Label>
                                <Input id="width" defaultValue="100%" className="col-span-2" />
                            </div>
                            <div className="grid grid-cols-3 items-center gap-4">
                                <Label htmlFor="maxWidth">Max. width</Label>
                                <Input id="maxWidth" defaultValue="300px" className="col-span-2" />
                            </div>
                            <div className="grid grid-cols-3 items-center gap-4">
                                <Label htmlFor="height">Height</Label>
                                <Input id="height" type="text" defaultValue="25px" className="col-span-2" />
                            </div>
                            <div className="grid grid-cols-3 items-center gap-4">
                                <Label htmlFor="maxHeight">Max. height</Label>
                                <Input id="maxHeight" type="text" defaultValue="none" className="col-span-2" />
                            </div>
                        </div>
                    </div>
                </PopoverContent>
            </Popover>
        </>
    )
}

"use client"

import { Button } from "@/components/jk/button"
import { Input, InputGroup, Label } from "@/components/jk/input"
import { Popover, PopoverContent } from "@/components/jk/popover"
import { Radio, RadioGroup } from "@/components/jk/radio"
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/jk/select"


export const PopoverWithFilter = () => {
    return (
        <>
            <Popover>
                <Button iconOnly variant="outline">
                    <span aria-hidden="true" className="iconify ph--funnel"></span>
                </Button>
                <PopoverContent className="p-4 flex flex-col w-75">
                    <div className="w-full flex flex-col">
                        <span className="text-fg mb-4 border-b border-border pb-3 font-medium">Filter</span>
                        <div className="w-full flex flex-col space-y-2.5">
                            <RadioGroup className="space-y-1.5 flex flex-col p-2.5 bg-bg-muted/50 rounded-md">
                                <Radio value="all" id="all">
                                    All events
                                </Radio>
                                <Radio value="passed_event" id="passed_event">
                                    Passed events
                                </Radio>
                                <Radio value="upcoming_event" id="upcoming_event">
                                    Upcoming events
                                </Radio>
                            </RadioGroup>
                            <InputGroup >
                                <Input variant="unstyled" type="email" placeholder="Search somthing" className="ps-8" />
                                <InputGroup.Leading className="[--left-space:9px] opacity-70 text-sm" absolute>
                                    <span className="flex text-sm iconify ph--magnifying-glass"></span>
                                </InputGroup.Leading>
                            </InputGroup>
                            <div className="relative space-y-1.5">
                                <Label htmlFor="location">Location</Label>
                                <Select id="location" name="location">
                                    <SelectTrigger  />
                                    <SelectContent >
                                        <SelectItem id="barca" textValue="Barcelone">Barcelona</SelectItem>
                                        <SelectItem id="miami" textValue="Miami">Miami</SelectItem>
                                        <SelectItem id="lubumbashi" textValue="Lubumbashi">Lubumbashi</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <Button size="sm" className="mt-4 justify-center">
                                Filter
                            </Button>
                        </div>
                    </div>
                </PopoverContent>
            </Popover>
        </>
    )
}