namirasoft-site-react 1.3.88 → 1.3.90

package/dist/App.js

@@ -1,13 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable, NSTabBar } from './main';
+import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
 import { useRef } from 'react';
 export function App() {
+    function f(n) {
+        console.log(n);
+        return n;
+    }
+    let c1 = () => _jsxs("p", { children: ["Content for Tab ", f(1)] });
+    let c2 = () => _jsxs("p", { children: ["Content for Tab ", f(2)] });
+    let c3 = () => _jsxs("p", { children: ["Content for Tab ", f(3)] });
     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" }) }
+        { title: 'Information', getContent: c1 },
+        { title: 'Price History', getContent: c2 },
+        { title: 'Price Estimator', getContent: c3 }
     ];
     let columns = {
         "id": "ID",
@@ -38,6 +45,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" } }), _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' })] }));
+    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(NSTabPage, { 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,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"}
+{"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,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAElB,SAAS,CAAC,CAAC,CAAS;QAEnB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACf,OAAO,CAAC,CAAC;IACV,CAAC;IACD,IAAI,EAAE,GAAG,GAAG,EAAE,CAAC,4CAAoB,CAAC,CAAC,CAAC,CAAC,IAAK,CAAC;IAC7C,IAAI,EAAE,GAAG,GAAG,EAAE,CAAC,4CAAoB,CAAC,CAAC,CAAC,CAAC,IAAK,CAAC;IAC7C,IAAI,EAAE,GAAG,GAAG,EAAE,CAAC,4CAAoB,CAAC,CAAC,CAAC,CAAC,IAAK,CAAC;IAC7C,MAAM,IAAI,GAAG;QACZ,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,EAAE;QACxC,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;QAC1C,EAAE,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,EAAE,EAAE;KAC5C,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,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,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,EACzB,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACrI,CACH,CAAC;AACH,CAAC"}

package/dist/components/NSTabPage.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+export interface NSTabPageTab {
+    title: string;
+    getContent: () => React.ReactNode;
+}
+export interface NSTabPageProps extends IBaseComponentProps {
+    tabs: NSTabPageTab[];
+}
+export interface NSTabPageState {
+    activeTabIndex: number;
+}
+export declare function NSTabPage(props: NSTabPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSTabPage.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Styles from './NSTabPage.module.css';
+import { useState } from "react";
+export function NSTabPage(props) {
+    const [state, setState] = useState({ activeTabIndex: 0 });
+    return (_jsxs("div", { className: `container ${Styles.ns_tab_bar}`, children: [_jsx("ul", { children: props.tabs.map((tab, index) => (_jsx("li", { className: state.activeTabIndex === index ? Styles.active : '', onClick: () => setState({ activeTabIndex: index }), children: tab.title }, index))) }), _jsx("div", { className: Styles.ns_tab_content, children: props.tabs[state.activeTabIndex].getContent() })] }));
+}
+//# sourceMappingURL=NSTabPage.js.map

package/dist/components/NSTabPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSTabPage.js","sourceRoot":"","sources":["../../src/components/NSTabPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAkBjC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;IAE1E,OAAO,CACH,eAAK,SAAS,EAAE,aAAa,MAAM,CAAC,UAAU,EAAE,aAC5C,uBAEQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,aAEI,SAAS,EAAE,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,YAEjD,GAAG,CAAC,KAAK,IAJL,KAAK,CAKT,CACR,CAAC,GAEL,EACL,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAChC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,UAAU,EAAE,GAC5C,IACJ,CACT,CAAC;AACN,CAAC"}

package/{src/components/NSTabBar.module.css → dist/components/NSTabPage.module.css}

@@ -25,7 +25,8 @@
 }
 
 .ns_tab_bar li.active {
-    background-color: #ccc;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 8px 8px 0 0;
 }
 
 .ns_tab_content {

package/dist/main.d.ts

@@ -38,7 +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/NSTabPage";
 export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";

package/dist/main.js

@@ -38,7 +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/NSTabPage";
 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,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"}
+{"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,wBAAwB,CAAC;AACvC,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.88",
+    "version": "1.3.90",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -63,4 +63,4 @@
             "last 1 safari version"
         ]
     }
-}
+}

package/src/App.tsx

@@ -1,14 +1,22 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable, NSTabBar } from './main';
+import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
 import { useRef } from 'react';
 
 export function App()
 {
+	function f(n: number)
+	{
+		console.log(n);
+		return n;
+	}
+	let c1 = () => <p>Content for Tab {f(1)}</p>;
+	let c2 = () => <p>Content for Tab {f(2)}</p>;
+	let c3 = () => <p>Content for Tab {f(3)}</p>;
 	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> }
+		{ title: 'Information', getContent: c1 },
+		{ title: 'Price History', getContent: c2 },
+		{ title: 'Price Estimator', getContent: c3 }
 	];
 	let columns = {
 		"id": "ID",
@@ -67,9 +75,8 @@ export function App()
 					getColumnAttributes={() => { return {} }}
 					getRowKey={row => row.id.toString()}
 				/>
-				<NSTabBar tabs={tabs} />
 			</div>
-			
+			<NSTabPage tabs={tabs} />
 			<NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
 		</>
 	);

package/{dist/components/NSTabBar.module.css → src/components/NSTabPage.module.css}

@@ -25,7 +25,8 @@
 }
 
 .ns_tab_bar li.active {
-    background-color: #ccc;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 8px 8px 0 0;
 }
 
 .ns_tab_content {

package/src/components/NSTabPage.tsx

@@ -0,0 +1,46 @@
+"use client";
+import Styles from './NSTabPage.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { useState } from "react";
+
+export interface NSTabPageTab
+{
+    title: string;
+    getContent: () => React.ReactNode;
+}
+
+export interface NSTabPageProps extends IBaseComponentProps
+{
+    tabs: NSTabPageTab[]
+}
+
+export interface NSTabPageState
+{
+    activeTabIndex: number
+}
+
+export function NSTabPage(props: NSTabPageProps)
+{
+    const [state, setState] = useState<NSTabPageState>({ activeTabIndex: 0 });
+
+    return (
+        <div className={`container ${Styles.ns_tab_bar}`}>
+            <ul>
+                {
+                    props.tabs.map((tab, index) => (
+                        <li
+                            key={index}
+                            className={state.activeTabIndex === index ? Styles.active : ''}
+                            onClick={() => setState({ activeTabIndex: index })}
+                        >
+                            {tab.title}
+                        </li>
+                    ))
+                }
+            </ul>
+            <div className={Styles.ns_tab_content}>
+                {props.tabs[state.activeTabIndex].getContent()}
+            </div>
+        </div>
+    );
+}

package/src/main.ts

@@ -38,7 +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/NSTabPage";
 export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";

package/dist/components/NSTabBar.d.ts

@@ -1,11 +0,0 @@
-/// <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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/components/NSTabBar.tsx

@@ -1,41 +0,0 @@
-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>
-    );
-}