index.tsx57 lines · main

1	import { useBreakpoint } from 'common'
2	import React, { ReactNode } from 'react'
3	import { cn, Dialog, DialogContent, DialogTrigger } from 'ui'
4
5	interface PopupFrameProps {
6	triggerContainerClassName?: string
7	trigger?: ReactNode
8	onOpenCallback?: any
9	className?: string
10	children: ReactNode
11	}
12
13	export function PopupFrame({
14	triggerContainerClassName = '',
15	trigger,
16	onOpenCallback,
17	className,
18	children,
19	}: PopupFrameProps) {
20	const [open, setOpen] = React.useState(false)
21	const isMobile = useBreakpoint(768)
22
23	React.useEffect(() => {
24	if (isMobile) setOpen(false)
25	}, [isMobile])
26
27	return (
28	<Dialog open={open} onOpenChange={(open) => setOpen(open)}>
29	<DialogTrigger asChild>
30	<button
31	onClick={() => {
32	if (onOpenCallback) onOpenCallback()
33	setOpen(true)
34	}}
35	className={cn('w-full', triggerContainerClassName)}
36	>
37	{trigger ?? 'Expand'}
38	</button>
39	</DialogTrigger>
40	<DialogContent className={className} size="xxlarge">
41	<div className="device-frame w-full! h-full flex items-center justify-center">
42	<div className="modal-group relative w-full h-full">
43	<button
44	onClick={() => setOpen(false)}
45	className="text-foreground-light hover:text-foreground absolute -top-8 right-0"
46	>
47	<p className="text-xs">Close</p>
48	</button>
49	<div className="modal-content h-full rounded-lg! border-none! overflow-hidden!">
50	{children}
51	</div>
52	</div>
53	</div>
54	</DialogContent>
55	</Dialog>
56	)
57	}