94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import { Button } from "@pswui/Button";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
|
|
/* remove */
|
|
|
|
export interface ControlledPopoverDemoProps {
|
|
PopoverProps: {
|
|
opened: boolean;
|
|
};
|
|
PopoverContentProps: {
|
|
direction: "row" | "col";
|
|
position: "start" | "end";
|
|
anchor: "start" | "middle" | "end";
|
|
align: "start" | "middle" | "end";
|
|
offset: "sm" | "md" | "lg";
|
|
className?: string;
|
|
};
|
|
}
|
|
|
|
/* end */
|
|
/* replace */
|
|
export function PopoverDemo({
|
|
PopoverProps,
|
|
PopoverContentProps,
|
|
}: ControlledPopoverDemoProps) {
|
|
/* with
|
|
export function PopoverDemo() {
|
|
*/
|
|
return (
|
|
<Popover opened={PopoverProps.opened}>
|
|
<PopoverTrigger>
|
|
<Button size="icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1.2em"
|
|
height="1.2em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<title>User</title>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
direction={PopoverContentProps.direction}
|
|
position={PopoverContentProps.position}
|
|
anchor={PopoverContentProps.anchor}
|
|
align={PopoverContentProps.align}
|
|
offset={PopoverContentProps.offset}
|
|
className={PopoverContentProps.className}
|
|
>
|
|
<Button
|
|
preset="ghost"
|
|
className="gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1.2em"
|
|
height="1.2em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<title>Dashboard</title>
|
|
<path
|
|
fill="currentColor"
|
|
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
|
|
/>
|
|
</svg>
|
|
<span className="flex-grow text-left">Dashboard</span>
|
|
</Button>
|
|
<Button
|
|
preset="ghost"
|
|
className="gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1.2em"
|
|
height="1.2em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<title>Log out</title>
|
|
<path
|
|
fill="currentColor"
|
|
d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"
|
|
/>
|
|
</svg>
|
|
<span className="flex-grow text-left">Log out</span>
|
|
</Button>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|