Popover

1"use client"23import { createSignal } from '@barefootjs/client'4import {5  Popover,6  PopoverTrigger,7  PopoverContent,8} from '@/components/ui/popover'910function BasicPopover() {11  const [open, setOpen] = createSignal(false)1213  return (14    <Popover open={open()} onOpenChange={setOpen}>15      <PopoverTrigger>16        <span className="inline-flex items-center rounded-md border px-4 py-2 text-sm">17          Click me18        </span>19      </PopoverTrigger>20      <PopoverContent>21        <div className="space-y-2">22          <h4 className="font-medium leading-none">About</h4>23          <p className="text-sm text-muted-foreground">24            This is a basic popover with simple text content.25          </p>26        </div>27      </PopoverContent>28    </Popover>29  )30}

1"use client"23import { createSignal } from '@barefootjs/client'4import {5  Popover,6  PopoverTrigger,7  PopoverContent,8  PopoverClose,9} from '@/components/ui/popover'1011function FormPopover() {12  const [open, setOpen] = createSignal(false)1314  return (15    <Popover open={open()} onOpenChange={setOpen}>16      <PopoverTrigger>17        <span className="inline-flex items-center rounded-md border px-4 py-2 text-sm">18          Settings19        </span>20      </PopoverTrigger>21      <PopoverContent align="start" class="w-80">22        <div className="grid gap-4">23          <div className="space-y-2">24            <h4 className="font-medium leading-none">Notifications</h4>25            <p className="text-sm text-muted-foreground">26              Configure how you receive notifications.27            </p>28          </div>29          <div className="grid gap-3">30            <div className="flex items-center justify-between">31              <label className="text-sm">Email</label>32              <input33                type="email"34                placeholder="you@example.com"35                className="h-8 w-48 rounded-md border px-3 text-sm"36              />37            </div>38          </div>39          <div className="flex justify-between">40            <PopoverClose class="rounded-md border px-3 py-1.5 text-sm">41              Cancel42            </PopoverClose>43            <button className="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground">44              Save45            </button>46          </div>47        </div>48      </PopoverContent>49    </Popover>50  )51}