@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
41 lines • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box, Typography, Stack } from "@mui/material";
export const PageHeader = ({ icon, title, subtitle, children, statistics }) => {
return (_jsx(Box, { id: "page-header", sx: {
backgroundColor: "var(--c1l2)",
color: "#FFF",
position: 'relative',
left: '50%',
right: '50%',
marginLeft: '-50vw',
marginRight: '-50vw',
width: '100vw',
'--c1': '#1565C0',
'--c1d1': '#1358AD',
'--c1d2': '#114A99',
'--c1l2': '#568BDA'
}, children: _jsxs(Box, { sx: {
paddingX: { xs: 2, sm: 3, md: 4 },
paddingY: 3
}, children: [_jsxs(Stack, { direction: { xs: "column", md: "row" }, spacing: { xs: 2, md: 4 }, alignItems: { xs: "flex-start", md: "center" }, sx: { width: "100%" }, children: [_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: "h4", sx: {
fontWeight: 600,
mb: 0.5,
fontSize: { xs: "1.75rem", md: "2.125rem" },
}, children: title }), subtitle && (_jsx(Typography, { id: "page-header-subtitle", variant: "body1", sx: {
color: "rgba(255,255,255,0.9)",
fontSize: { xs: "0.875rem", md: "1rem" },
}, 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, index) => (_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 })] }, index))) }))] }) }));
};
//# sourceMappingURL=PageHeader.js.map