a very good jj gui
feat: add popover UI component
+39
+39
apps/desktop/src/components/ui/popover.tsx
+39
apps/desktop/src/components/ui/popover.tsx
···
1
+
import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
2
+
import { cn } from "@/lib/utils";
3
+
4
+
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
5
+
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
6
+
}
7
+
8
+
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
9
+
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
10
+
}
11
+
12
+
function PopoverContent({
13
+
className,
14
+
align = "center",
15
+
sideOffset = 4,
16
+
...props
17
+
}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "sideOffset">) {
18
+
return (
19
+
<PopoverPrimitive.Portal>
20
+
<PopoverPrimitive.Positioner
21
+
className="isolate z-50 outline-none"
22
+
align={align}
23
+
sideOffset={sideOffset}
24
+
>
25
+
<PopoverPrimitive.Popup
26
+
data-slot="popover-content"
27
+
className={cn(
28
+
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
29
+
"ring-foreground/10 bg-popover text-popover-foreground rounded-md shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
30
+
className,
31
+
)}
32
+
{...props}
33
+
/>
34
+
</PopoverPrimitive.Positioner>
35
+
</PopoverPrimitive.Portal>
36
+
);
37
+
}
38
+
39
+
export { Popover, PopoverTrigger, PopoverContent };