portal

1import { cn } from "@/lib/utils";
2import React from "react";
3import { createPortal } from "react-dom";
4 
5function Portal({ className, ...props }: React.ComponentProps<"div">) {
6	const [mounted, setMounted] = React.useState(false);
7 
8	React.useEffect(() => {
9		setMounted(true);
10 
11		const originalStyle = window.getComputedStyle(document.body).overflow;
12		const scrollbarWidth =
13			window.innerWidth - document.documentElement.clientWidth;
14		const originalPaddingRight = document.body.style.paddingRight;
15 
16		document.body.style.overflow = "hidden";
17		if (scrollbarWidth > 0) {
18			document.body.style.paddingRight = `${scrollbarWidth}px`;
19		}
20 
21		return () => {
22			document.body.style.overflow = originalStyle;
23			document.body.style.paddingRight = originalPaddingRight;
24		};
25	}, []);
26 
27	if (!mounted) {
28		return null;
29	}
30 
31	return createPortal(
32		<div
33			className={cn("fixed inset-0 isolate z-40 flex flex-col", className)}
34			{...props}
35		/>,
36		document.body
37	);
38}
39 
40function PortalBackdrop({ className, ...props }: React.ComponentProps<"div">) {
41	return (
42		<div
43			className={cn(
44				"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 -z-1 bg-background/95 backdrop-blur-sm duration-500 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:bg-background/60",
45				className
46			)}
47			{...props}
48		/>
49	);
50}
51 
52export { Portal, PortalBackdrop };