@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
48 lines (47 loc) • 4.04 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalNav = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const ArrowForward_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowForward"));
const HorizontalNav = ({ sections }) => {
const theme = (0, material_1.useTheme)();
const lastColor = sections.length === 1
? theme.palette.primary.dark
: sections.length === 2
? theme.palette.primary.main
: theme.palette.primary.light;
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
backgroundImage: {
md: `linear-gradient(90deg, ${theme.palette.primary.dark} 50%, ${lastColor} 50%)`,
xs: `none`,
},
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ maxWidth: "xl", disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
display: "grid",
columnGap: 3,
rowGap: 3,
gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ gridColumn: { xs: "1 / span 12", md: "2 / span 10" }, my: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: { xs: "column", md: "row" }, width: "100%", color: "primary.contrastText", textAlign: "center" }, { children: sections.map((section, index) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: index > 2 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ bgcolor: index === 0
? theme.palette.primary.dark
: index === 1
? theme.palette.primary.main
: theme.palette.primary.light, flex: "1 0", sx: {
px: 4,
py: {
xs: 4,
sm: 4,
md: 8,
},
} }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 4, height: "100%", alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ color: "primary.contrastText", sx: {
svg: {
height: "60px",
width: "60px",
},
} }, { children: section.icon })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", color: "primary.contrastText" }, { children: section.title })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.subtitle &&
typeof section.subtitle === "string" && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", color: "primary.contrastText" }, { children: section.subtitle }))), section.subtitle &&
typeof section.subtitle !== "string" &&
section.subtitle] })] })), section.cta && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", color: "negative", endIcon: (0, jsx_runtime_1.jsx)(ArrowForward_1.default, {}) }, { children: section.cta.label })))] })) }), index)) }))) })) })) })) })) })));
};
exports.HorizontalNav = HorizontalNav;