You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.1 KiB
42 lines
1.1 KiB
import classNames from "classnames"; |
|
import { ReactNode } from "react"; |
|
|
|
import { Transition } from "@/components/Transition"; |
|
import { useIsMobile } from "@/hooks/useIsMobile"; |
|
|
|
interface Props { |
|
children?: ReactNode; |
|
show?: boolean; |
|
className?: string; |
|
height?: number; |
|
width?: number; |
|
active?: boolean; // true if a child view is loaded |
|
} |
|
|
|
export function OverlayPage(props: Props) { |
|
const { isMobile } = useIsMobile(); |
|
const width = !isMobile ? `${props.width}px` : "100%"; |
|
return ( |
|
<Transition |
|
animation={props.active ? "slide-full-left" : "slide-full-right"} |
|
className="absolute inset-0" |
|
durationClass="duration-[400ms]" |
|
show={props.show} |
|
> |
|
<div |
|
className={classNames([ |
|
props.className, |
|
"grid grid-rows-[auto,minmax(0,1fr)]", |
|
])} |
|
data-floating-page={props.show ? "true" : undefined} |
|
style={{ |
|
height: props.height ? `${props.height}px` : undefined, |
|
maxHeight: "70vh", |
|
width: props.width ? width : undefined, |
|
}} |
|
> |
|
{props.children} |
|
</div> |
|
</Transition> |
|
); |
|
}
|
|
|