sccoreui/dist/pages/tabs/tabs.js

ui-sccore

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const tabview_1 = require("primereact/tabview");
require("./tabs.scss");
const TabsComponent = () => {
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light no-shadow" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand no-shadow" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark responsive flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box responsive flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
};
exports.default = TabsComponent;