sccoreui
Version:
ui-sccore
85 lines (84 loc) • 9.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const megamenu_1 = require("primereact/megamenu");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const button_1 = require("primereact/button");
const HeaderComponent = () => {
const items = [
{
label: "Home",
},
{
label: "Products",
items: [
[
{
label: "Products",
items: [
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
},
],
},
],
],
},
{
label: "Resources",
items: [
[
{
label: "Resources",
items: [
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
},
],
},
],
],
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", className: "m-0 text-gray-600 w-6" }, { children: "Aboutus" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Support" }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Press" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Contact" }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Carrer" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Sitemap" }))] }))),
},
{
template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Legal" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Cookie settings" }))] }))),
},
{
template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "md:hidden m-0 bg-primary-500 w-full " })),
},
{
template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "md:hidden m-0 border-500 bg-transparent text-gray-500 w-full border-gray-300 shadow-md" })),
},
];
const start = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 w-full" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "menu-logo" }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "text-gray-900 font-bold" }, { children: "Untitled UI" }))] })));
const end = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hidden md:flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "bg-transparent text-gray-500 border-none" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "bg-primary-500 " })] })));
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(megamenu_1.MegaMenu, { model: items, orientation: "horizontal", start: start, end: end, menuIcon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-closeicon absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-hamburgermenu absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hamburger-menu" }) }))] }), breakpoint: "770px", className: "w-full", pt: {} }) }));
};
exports.default = HeaderComponent;