jsx import { Interpolation , jsx , Theme } from "@emotion/react" ; import { useViewport } from "../Effect/useViewport" ; export interface SafeAreaProps extends React . HTMLProps < HTMLDivElement > { children ? : React . ReactNode ; type : "top" | "bottom" ; } export function SafeArea ( props ) { const { children , type = "bottom" , ... extra } = props ; useViewport ( { viewportFit : "cover" } ) ; let boxCss ; if ( type === "top" ) { boxCss = { height : [ `constant(safe-area-inset-top, 0)` , `env(safe-area-inset-top, 0)` ] , } ; } else if ( type === "bottom" ) { boxCss = { height : [ `constant(safe-area-inset-bottom, 0)` , `env(safe-area-inset-bottom, 0)` ] , } ; } return ( < div css = { boxCss } { ... extra } > { children } < /div>); }