Popover

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Popover } from '@/components/ui/popover';
6
7export function Default() {
8  return (
9    <Popover>
10      <Popover.Trigger asChild>
11        <Button variant="ghost">acme-web</Button>
12      </Popover.Trigger>
13      <Popover.Content className="w-80 max-w-[calc(100vw-2rem)]">
14        <div className="grid gap-4">
15          <div className="space-y-1">
16            <h4 className="text-sm leading-none font-medium">Rename project</h4>
17            <p className="text-muted-foreground text-xs">
18              The old name keeps redirecting for 30 days.
19            </p>
20          </div>
21          <Input
22            id="project-slug"
23            label="Project name"
24            defaultValue="acme-web"
25            description="Preview URL: acme-web.northwind.app"
26          />
27          <div className="flex justify-end gap-2">
28            <Popover.Close asChild>
29              <Button variant="outline" size="sm">
30                Cancel
31              </Button>
32            </Popover.Close>
33            <Popover.Close asChild>
34              <Button size="sm">Rename</Button>
35            </Popover.Close>
36          </div>
37        </div>
38      </Popover.Content>
39    </Popover>
40  );
41}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Popover } from '@/components/ui/popover';
6
7export function Default() {
8  return (
9    <Popover>
10      <Popover.Trigger asChild>
11        <Button variant="ghost">acme-web</Button>
12      </Popover.Trigger>
13      <Popover.Content className="w-80 max-w-[calc(100vw-2rem)]">
14        <div className="grid gap-4">
15          <div className="space-y-1">
16            <h4 className="text-sm leading-none font-medium">Rename project</h4>
17            <p className="text-muted-foreground text-xs">
18              The old name keeps redirecting for 30 days.
19            </p>
20          </div>
21          <Input
22            id="project-slug"
23            label="Project name"
24            defaultValue="acme-web"
25            description="Preview URL: acme-web.northwind.app"
26          />
27          <div className="flex justify-end gap-2">
28            <Popover.Close asChild>
29              <Button variant="outline" size="sm">
30                Cancel
31              </Button>
32            </Popover.Close>
33            <Popover.Close asChild>
34              <Button size="sm">Rename</Button>
35            </Popover.Close>
36          </div>
37        </div>
38      </Popover.Content>
39    </Popover>
40  );
41}