79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import { Image, View } from "react-native";
|
|
import { useGlobal } from "reactn";
|
|
|
|
import useLayoutType from "../hooks/useLayoutType";
|
|
|
|
import { background as backgrounds } from "../assets";
|
|
import { Style } from "../styles";
|
|
|
|
export default ({ currentUID = null, children }) => {
|
|
const { isWeb = false } = useLayoutType();
|
|
|
|
// Web: full-screen background with a centered content area (30% width)
|
|
const [webBackgroundImg] = useGlobal("webBackgroundImg");
|
|
|
|
if (isWeb) {
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minHeight: "100svh",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{/* Full-viewport background for web */}
|
|
<Image
|
|
source={webBackgroundImg || backgrounds.homeBG}
|
|
resizeMode="cover"
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
/>
|
|
|
|
{/* Centered content column (phone-like width) */}
|
|
<View
|
|
style={{
|
|
width: isWeb ? "60%" : "30%",
|
|
minWidth: 360,
|
|
maxWidth: isWeb ? 800 : 520,
|
|
height: "100svh",
|
|
backgroundColor: "transparent",
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }}>{children}</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Native / non-web: original layout
|
|
const sharedPanelStyle = {};
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: "row-reverse",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flex: 2,
|
|
position: "relative",
|
|
...Style.defaultBorder,
|
|
borderTopWidth: 0,
|
|
borderBottomWidth: 0,
|
|
...sharedPanelStyle,
|
|
}}
|
|
>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|