button-group-popover-demo

1import { BotIcon, ChevronDownIcon } from "lucide-react";
2
3import { Button } from "@/registry/pure-ui/ui/button";
4import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
5import {
6  Popover,
7  PopoverPopup,
8  PopoverTrigger,
9} from "@/registry/pure-ui/ui/popover";
10import { Separator } from "@/registry/pure-ui/ui/separator";
11import { Textarea } from "@/registry/pure-ui/ui/textarea";
12
13export function ButtonGroupPopoverDemo() {
14  return (
15    <ButtonGroup>
16      <Button variant="outline">
17        <BotIcon /> Copilot
18      </Button>
19      <Popover>
20        <PopoverTrigger
21          render={
22            <Button variant="outline" size="icon" aria-label="Open Popover" />
23          }
24        >
25          <ChevronDownIcon />
26        </PopoverTrigger>
27        <PopoverPopup align="end" className="rounded-xl p-0 text-sm">
28          <div className="px-4 py-3">
29            <div className="text-sm font-medium">Agent Tasks</div>
30          </div>
31          <Separator />
32          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
33            <Textarea
34              placeholder="Describe your task in natural language."
35              className="mb-4 resize-none"
36            />
37            <p className="font-medium">Start a new task with Copilot</p>
38            <p className="text-muted-foreground">
39              Describe your task in natural language. Copilot will work in the
40              background and open a pull request for your review.
41            </p>
42          </div>
43        </PopoverPopup>
44      </Popover>
45    </ButtonGroup>
46  );
47}