@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
52 lines • 4.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box, Typography, Stack, Container } from "@mui/material";
export const PageHeader = ({ icon, title, subtitle, children, statistics }) => {
return (_jsx(Box, { id: "page-header", sx: {
background: "linear-gradient(135deg, var(--c1d3, #0D3B6E) 0%, var(--c1, #1565C0) 40%, var(--c1l2, #568BDA) 100%)",
color: "#FFF",
position: "relative",
left: "50%",
right: "50%",
marginLeft: "-50vw",
marginRight: "-50vw",
width: "100vw",
overflow: "hidden",
"&::before": {
content: "''",
position: "absolute",
top: -100,
right: -100,
width: 400,
height: 400,
borderRadius: "50%",
background: "rgba(255,255,255,0.05)",
pointerEvents: "none",
},
"&::after": {
content: "''",
position: "absolute",
bottom: -80,
left: -80,
width: 300,
height: 300,
borderRadius: "50%",
background: "rgba(255,255,255,0.04)",
pointerEvents: "none",
},
}, children: _jsxs(Container, { maxWidth: "xl", sx: { position: "relative", zIndex: 1, paddingY: 6 }, children: [_jsxs(Stack, { direction: { xs: "column", md: "row" }, spacing: { xs: 2, md: 4 }, alignItems: { xs: "flex-start", md: "center" }, sx: { width: "100%" }, children: [icon
? (_jsxs(Stack, { id: "page-header-title-section", direction: "row", spacing: 2, alignItems: "center", sx: { flex: 1 }, children: [_jsx(Box, { id: "page-header-icon", sx: {
backgroundColor: "rgba(255,255,255,0.2)",
borderRadius: "12px",
p: 1.5,
display: "flex",
alignItems: "center",
justifyContent: "center"
}, children: React.cloneElement(icon, { sx: { fontSize: 32, color: "#FFF" } }) }), _jsxs(Box, { id: "page-header-text", children: [_jsx(Typography, { id: "page-header-title", variant: "h3", sx: { fontWeight: 500, mb: 1 }, children: title }), subtitle && (_jsx(Typography, { id: "page-header-subtitle", variant: "h6", sx: { color: "rgba(255,255,255,0.85)", fontWeight: 400 }, children: subtitle }))] })] }))
: (_jsxs(Box, { id: "page-header-text", sx: { flex: 1 }, children: [_jsx(Typography, { id: "page-header-title", variant: "h3", sx: { fontWeight: 500, mb: 1 }, children: title }), subtitle && (_jsx(Typography, { id: "page-header-subtitle", variant: "h6", sx: { color: "rgba(255,255,255,0.85)", fontWeight: 400 }, children: subtitle }))] })), children && (_jsx(Stack, { id: "page-header-actions", direction: "row", spacing: 1, sx: {
flexShrink: 0,
justifyContent: { xs: "flex-start", md: "flex-end" },
width: { xs: "100%", md: "auto" }
}, children: children }))] }), statistics && statistics.length > 0 && (_jsx(Stack, { id: "page-header-statistics", direction: { xs: "column", sm: "row" }, spacing: 3, sx: { mt: 3 }, children: statistics.map((stat) => (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [React.cloneElement(stat.icon, { sx: { color: "#FFF", fontSize: 20 } }), _jsx(Typography, { variant: "h6", sx: { color: "#FFF", fontWeight: 600, mr: 1 }, children: stat.value }), _jsx(Typography, { variant: "body2", sx: { color: "rgba(255,255,255,0.9)", fontSize: "0.875rem" }, children: stat.label })] }, stat.label))) }))] }) }));
};
//# sourceMappingURL=PageHeader.js.map