namirasoft-site-react 1.3.86 → 1.3.88

package/dist/App.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable } from './main';
+import { NSFooter, NSHeader, NSTable, NSTabBar } from './main';
 import { useRef } from 'react';
 export function App() {
+    const tabs = [
+        { label: 'Information', content: _jsx("p", { children: "Content for Tab 1" }) },
+        { label: 'Price History', content: _jsx("p", { children: "Content for Tab 2" }) },
+        { label: 'Price Estimator', content: _jsx("p", { children: "Content for Tab 3" }) }
+    ];
     let columns = {
         "id": "ID",
         "project": "Project",
@@ -33,6 +38,6 @@ export function App() {
         return row[column];
     }
     let table = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', account: false, style: { backgroundColor: "transparent !important" } }), _jsx("div", { children: _jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() }) }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', account: false, style: { backgroundColor: "transparent !important" } }), _jsxs("div", { children: [_jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() }), _jsx(NSTabBar, { tabs: tabs })] }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
 }
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAElB,IAAI,OAAO,GAAG;QACb,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACjB;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAUD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAExC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IACD,IAAI,KAAK,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACvC,OAAO,CACN,8BACC,KAAC,QAAQ,IACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,EACxE,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,GACnD,EACF,wBACC,KAAC,OAAO,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAClC,GACG,EACN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACrI,CACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAElB,MAAM,IAAI,GAAG;QACZ,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,4CAAwB,EAAE;QAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,4CAAwB,EAAE;QAC7D,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,4CAAwB,EAAE;KAC/D,CAAC;IACF,IAAI,OAAO,GAAG;QACb,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACjB;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAUD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAExC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IACD,IAAI,KAAK,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACvC,OAAO,CACN,8BACC,KAAC,QAAQ,IACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,EACxE,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,GACnD,EACF,0BACC,KAAC,OAAO,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAClC,EACF,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,IACnB,EAEN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACrI,CACH,CAAC;AACH,CAAC"}

package/dist/components/NSCard.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Styles from './NSCard.module.css';
 import { NSLinkBlue } from './NSLinkBlue';
 export function NSCard(props) {
-    var _a, _b, _c;
+    var _a, _b;
     return (_jsxs("article", { id: props.id, className: `${Styles.ns_card} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsxs("div", { className: Styles.ns_card_detail_container, children: [_jsxs("div", { className: Styles.ns_card_title_img, style: {
                             alignItems: props.description ? "flex-start" : "center",
-                        }, children: [_jsx("img", Object.assign({ className: Styles.ns_card_img }, props.image)), _jsxs("span", { className: Styles.ns_card_headline, style: { color: (_b = props.headline) === null || _b === void 0 ? void 0 : _b.color }, children: [" ", (_c = props.headline) === null || _c === void 0 ? void 0 : _c.text, " "] }), _jsx("h3", { className: Styles.ns_card_title, children: props.title })] }), props.description &&
+                        }, children: [_jsx("img", Object.assign({ className: Styles.ns_card_img }, props.image)), props.headline &&
+                                _jsxs("span", { className: Styles.ns_card_headline, style: { color: (_b = props.headline) === null || _b === void 0 ? void 0 : _b.color }, children: [" ", props.headline.text, " "] }), _jsx("h3", { className: Styles.ns_card_title, children: props.title })] }), props.description &&
                         _jsx("p", { className: Styles.ns_card_description, children: props.description })] }), props.link ?
                 props.link.title ?
                     _jsx("div", { className: Styles.ns_card_link_container, children: _jsx(NSLinkBlue, { title: props.link.title, href: props.link.href, target: props.link.target, style: { marginTop: "24px" } }) })

package/dist/components/NSCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSCard.js","sourceRoot":"","sources":["../../src/components/NSCard.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiB1C,MAAM,UAAU,MAAM,CAAC,KAAmB;;IAEzC,OAAO,CACN,mBAAS,EAAE,EAAE,KAAK,CAAC,EAAE,EACpB,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC5D,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,eAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,aAC9C,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACvC,KAAK,EAAE;4BACN,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;yBACvD,aAED,4BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,IAAM,KAAK,CAAC,KAAK,EAAI,EACvD,gBAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,QAAQ,0CAAE,KAAK,EAAE,kBAAI,MAAA,KAAK,CAAC,QAAQ,0CAAE,IAAI,SAAS,EAClH,aAAI,SAAS,EAAE,MAAM,CAAC,aAAa,YACjC,KAAK,CAAC,KAAK,GACR,IACA,EAEL,KAAK,CAAC,WAAW;wBACjB,YAAG,SAAS,EAAE,MAAM,CAAC,mBAAmB,YACtC,KAAK,CAAC,WAAW,GACf,IAEA,EAEL,KAAK,CAAC,IAAI,CAAC,CAAC;gBACX,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBACjB,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACvB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EACrB,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EACzB,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAC3B,GACG;oBACN,CAAC;wBACD,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EACrB,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,GACxB,GACG;gBACP,CAAC;oBACD,mBAAK,IAEG,CACX,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSCard.js","sourceRoot":"","sources":["../../src/components/NSCard.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiB1C,MAAM,UAAU,MAAM,CAAC,KAAmB;;IAEzC,OAAO,CACN,mBAAS,EAAE,EAAE,KAAK,CAAC,EAAE,EACpB,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC5D,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,eAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,aAC9C,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACvC,KAAK,EAAE;4BACN,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;yBACvD,aAED,4BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,IAAM,KAAK,CAAC,KAAK,EAAI,EACtD,KAAK,CAAC,QAAQ;gCACd,gBAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,QAAQ,0CAAE,KAAK,EAAE,kBAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,SAAS,EAElH,aAAI,SAAS,EAAE,MAAM,CAAC,aAAa,YACjC,KAAK,CAAC,KAAK,GACR,IACA,EAEL,KAAK,CAAC,WAAW;wBACjB,YAAG,SAAS,EAAE,MAAM,CAAC,mBAAmB,YACtC,KAAK,CAAC,WAAW,GACf,IAEA,EAEL,KAAK,CAAC,IAAI,CAAC,CAAC;gBACX,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBACjB,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACvB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EACrB,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EACzB,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAC3B,GACG;oBACN,CAAC;wBACD,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EACrB,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,GACxB,GACG;gBACP,CAAC;oBACD,mBAAK,IAEG,CACX,CAAC;AACH,CAAC"}

package/dist/components/NSCard.module.css

@@ -46,6 +46,8 @@
 	font-family: inherit;
 	line-height: normal;
 	text-align: center;
+	width: 100%;
+	color: inherit;
 }
 
 .ns_card_headline {

package/dist/components/NSLayout.js

@@ -5,6 +5,6 @@ import { NSFooter } from './NSFooter';
 import { NSNotification } from './NSNotification';
 export function NSLayout(props) {
     var _a;
-    return (_jsxs("div", { id: props.id, className: `${Styles.ns_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx(NSHeader, { scope: props.scope, name: "Header", logo: props.logo }), props.notifications.map(props => _jsx(NSNotification, Object.assign({}, props))), _jsx("main", { className: "d-flex flex-column text-white px-3", style: { background: props.background }, children: props.children }), _jsx(NSFooter, { scope: props.scope, name: "Footer", logo: props.logo })] }));
+    return (_jsxs("div", { id: props.id, className: `${Styles.ns_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx(NSHeader, { scope: props.scope, name: "Header", logo: props.logo }), props.notifications.map(props => _jsx(NSNotification, Object.assign({}, props))), _jsx("main", { className: `d-flex flex-column text-white px-3 ${Styles.ns_layout_main}`, style: { background: props.background }, children: props.children }), _jsx(NSFooter, { scope: props.scope, name: "Footer", logo: props.logo })] }));
 }
 //# sourceMappingURL=NSLayout.js.map

package/dist/components/NSLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AAWxE,MAAM,UAAU,QAAQ,CAAC,KAAqB;;IAE7C,OAAO,CACN,eAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAChB,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACjE,KAAK,EAAE,KAAK,CAAC,KAAK,aAClB,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,EAC/D,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAC,cAAc,oBAAK,KAAK,EAAmB,CAAC,EAC/E,eAAM,SAAS,EAAC,oCAAoC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,YAC1F,KAAK,CAAC,QAAQ,GACT,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,IAC1D,CACP,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AAWxE,MAAM,UAAU,QAAQ,CAAC,KAAqB;;IAE7C,OAAO,CACN,eAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAChB,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACjE,KAAK,EAAE,KAAK,CAAC,KAAK,aAClB,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,EAC/D,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAC,cAAc,oBAAK,KAAK,EAAmB,CAAC,EAC/E,eAAM,SAAS,EAAE,sCAAsC,MAAM,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,YACrH,KAAK,CAAC,QAAQ,GACT,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,IAC1D,CACP,CAAC;AACH,CAAC"}

package/dist/components/NSLayout.module.css

@@ -4,4 +4,15 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+}
+
+.ns_layout_main { 
+	display: flex;
+	flex-direction: column;
+	color: #fff;
+	padding-left: 16px;
+	padding-right: 16px;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }

package/dist/components/NSLink.module.css

@@ -33,4 +33,5 @@
 	top: 0;
 	bottom: 0;
 	cursor: pointer;
+	background-color: transparent !important;
 }

package/dist/components/NSTabBar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+interface TabRow {
+    label: string;
+    content: React.ReactNode;
+}
+export interface NSTabBarProps extends IBaseComponentProps {
+    tabs: TabRow[];
+}
+export declare function NSTabBar(props: NSTabBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NSTabBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Styles from './NSTabBar.module.css';
+import { useState } from "react";
+export function NSTabBar(props) {
+    const [activeTab, setActiveTab] = useState(1);
+    const handleTabClick = (index) => {
+        setActiveTab(index);
+    };
+    return (_jsxs("div", { className: `container ${Styles.ns_tab_bar}`, children: [_jsx("ul", { children: props.tabs.map((tab, index) => (_jsx("li", { className: activeTab === index ? Styles.active : '', onClick: () => handleTabClick(index), children: tab.label }, index))) }), _jsx("div", { className: Styles.ns_tab_content, children: props.tabs[activeTab].content })] }));
+}
+//# sourceMappingURL=NSTabBar.js.map

package/dist/components/NSTabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSTabBar.js","sourceRoot":"","sources":["../../src/components/NSTabBar.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAYjC,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAEzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QAErC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,CACH,eAAK,SAAS,EAAE,aAAa,MAAM,CAAC,UAAU,EAAE,aAC5C,uBACK,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,aAEI,SAAS,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAE,CAAC,CAAC,EAAE,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,YAEnC,GAAG,CAAC,KAAK,IAJL,KAAK,CAKT,CACR,CAAC,GACD,EACL,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,GAC5B,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSTabBar.module.css

@@ -0,0 +1,35 @@
+.ns_tab_bar {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C66;
+    padding: 16px;
+}
+
+.ns_tab_bar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.ns_tab_bar li {
+    flex: 1;
+    text-align: center;
+    padding: 10px;
+    cursor: pointer;
+    border-right: 1px solid #ccc;
+}
+
+.ns_tab_bar li:last-child {
+    border-right: none;
+}
+
+.ns_tab_bar li.active {
+    background-color: #ccc;
+}
+
+.ns_tab_content {
+    padding: 16px;
+    border-radius: 0 0 8px 8px;
+    background-color: #FFFFFF99;
+}

package/dist/components/NSTitle.module.css

@@ -2,7 +2,7 @@
 	font-size: 24px;
 	font-weight: 700;
 	line-height: normal;
-	color: #001664;
+	color: inherit;
 	margin-bottom: 16px;
 	width: 100%;
 	text-align: center;

package/dist/main.d.ts

@@ -38,6 +38,7 @@ export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";
 export * from "./components/NSPagination";
 export * from "./components/NSTable";
+export * from "./components/NSTabBar";
 export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";

package/dist/main.js

@@ -38,6 +38,7 @@ export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";
 export * from "./components/NSPagination";
 export * from "./components/NSTable";
+export * from "./components/NSTabBar";
 export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,mCAAmC,CAAC;AAClD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,mCAAmC,CAAC;AAClD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.86",
+    "version": "1.3.88",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.tsx

@@ -1,10 +1,15 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable } from './main';
+import { NSFooter, NSHeader, NSTable, NSTabBar } from './main';
 import { useRef } from 'react';
 
 export function App()
 {
+	const tabs = [
+		{ label: 'Information', content: <p>Content for Tab 1</p> },
+		{ label: 'Price History', content: <p>Content for Tab 2</p> },
+		{ label: 'Price Estimator', content: <p>Content for Tab 3</p> }
+	];
 	let columns = {
 		"id": "ID",
 		"project": "Project",
@@ -62,7 +67,9 @@ export function App()
 					getColumnAttributes={() => { return {} }}
 					getRowKey={row => row.id.toString()}
 				/>
+				<NSTabBar tabs={tabs} />
 			</div>
+			
 			<NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
 		</>
 	);

package/src/components/NSCard.module.css

@@ -46,6 +46,8 @@
 	font-family: inherit;
 	line-height: normal;
 	text-align: center;
+	width: 100%;
+	color: inherit;
 }
 
 .ns_card_headline {

package/src/components/NSCard.tsx

@@ -30,7 +30,9 @@ export function NSCard(props: INSCardProps)
 					}}
 				>
 					<img className={Styles.ns_card_img} {...props.image} />
-					<span className={Styles.ns_card_headline} style={{ color: props.headline?.color }}> {props.headline?.text} </span>
+					{props.headline && 
+						<span className={Styles.ns_card_headline} style={{ color: props.headline?.color }}> {props.headline.text} </span>
+					}
 					<h3 className={Styles.ns_card_title}>
 						{props.title}
 					</h3>

package/src/components/NSLayout.module.css

@@ -4,4 +4,15 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+}
+
+.ns_layout_main { 
+	display: flex;
+	flex-direction: column;
+	color: #fff;
+	padding-left: 16px;
+	padding-right: 16px;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }

package/src/components/NSLayout.tsx

@@ -22,7 +22,7 @@ export function NSLayout(props: INSLayoutProps)
 			style={props.style}>
 			<NSHeader scope={props.scope} name="Header" logo={props.logo} />
 			{props.notifications.map(props => <NSNotification {...props}></NSNotification>)}
-			<main className="d-flex flex-column text-white px-3" style={{ background: props.background }}>
+			<main className={`d-flex flex-column text-white px-3 ${Styles.ns_layout_main}`} style={{ background: props.background }}>
 				{props.children}
 			</main>
 			<NSFooter scope={props.scope} name="Footer" logo={props.logo} />

package/src/components/NSLink.module.css

@@ -33,4 +33,5 @@
 	top: 0;
 	bottom: 0;
 	cursor: pointer;
+	background-color: transparent !important;
 }

package/src/components/NSTabBar.module.css

@@ -0,0 +1,35 @@
+.ns_tab_bar {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C66;
+    padding: 16px;
+}
+
+.ns_tab_bar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.ns_tab_bar li {
+    flex: 1;
+    text-align: center;
+    padding: 10px;
+    cursor: pointer;
+    border-right: 1px solid #ccc;
+}
+
+.ns_tab_bar li:last-child {
+    border-right: none;
+}
+
+.ns_tab_bar li.active {
+    background-color: #ccc;
+}
+
+.ns_tab_content {
+    padding: 16px;
+    border-radius: 0 0 8px 8px;
+    background-color: #FFFFFF99;
+}

package/src/components/NSTabBar.tsx

@@ -0,0 +1,41 @@
+import Styles from './NSTabBar.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { useState } from "react";
+
+interface TabRow
+{
+    label: string;
+    content: React.ReactNode;
+}
+export interface NSTabBarProps extends IBaseComponentProps
+{
+    tabs: TabRow[]
+}
+
+export function NSTabBar(props: NSTabBarProps)
+{
+    const [activeTab, setActiveTab] = useState(1);
+
+    const handleTabClick = (index: number) =>
+    {
+        setActiveTab(index);
+    };
+    return (
+        <div className={`container ${Styles.ns_tab_bar}`}>
+            <ul>
+                {props.tabs.map((tab, index) => (
+                    <li
+                        key={index}
+                        className={activeTab === index ? Styles.active  : ''}
+                        onClick={() => handleTabClick(index)}
+                    >
+                        {tab.label}
+                    </li>
+                ))}
+            </ul>
+            <div className={Styles.ns_tab_content}>
+                {props.tabs[activeTab].content}
+            </div>
+        </div>
+    );
+}

package/src/components/NSTitle.module.css

@@ -2,7 +2,7 @@
 	font-size: 24px;
 	font-weight: 700;
 	line-height: normal;
-	color: #001664;
+	color: inherit;
 	margin-bottom: 16px;
 	width: 100%;
 	text-align: center;

package/src/main.ts

@@ -38,6 +38,7 @@ export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";
 export * from "./components/NSPagination";
 export * from "./components/NSTable";
+export * from "./components/NSTabBar";
 export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";