namirasoft-site-react 1.3.89 → 1.3.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/App.js +8 -5
  2. package/dist/App.js.map +1 -1
  3. package/dist/components/NSTabPage.d.ts +13 -0
  4. package/dist/components/NSTabPage.js +9 -0
  5. package/dist/components/NSTabPage.js.map +1 -0
  6. package/dist/components/NSTabPage.module.css +42 -0
  7. package/dist/main.d.ts +1 -1
  8. package/dist/main.js +1 -1
  9. package/dist/main.js.map +1 -1
  10. package/package.json +2 -2
  11. package/src/App.tsx +9 -5
  12. package/src/components/NSTabPage.module.css +42 -0
  13. package/src/components/NSTabPage.tsx +48 -0
  14. package/src/main.ts +1 -1
  15. package/dist/components/NSTabBar.d.ts +0 -11
  16. package/dist/components/NSTabBar.js +0 -12
  17. package/dist/components/NSTabBar.js.map +0 -1
  18. package/dist/components/NSTabBar.module.css +0 -36
  19. package/src/components/NSTabBar.module.css +0 -36
  20. package/src/components/NSTabBar.tsx +0 -42
package/dist/App.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import './App.css';
3
3
  import 'bootstrap/dist/css/bootstrap.min.css';
4
- import { NSFooter, NSHeader, NSTable, NSTabBar } from './main';
4
+ import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
5
5
  import { useRef } from 'react';
6
6
  export function App() {
7
+ let content1 = () => _jsx("p", { children: "Content for Tab" });
8
+ let content2 = () => _jsx("p", { children: "Content for Tab" });
9
+ let content3 = () => _jsx("p", { children: "Content for Tab" });
7
10
  const tabs = [
8
- { label: 'Information', content: _jsx("p", { children: "Content for Tab 1" }) },
9
- { label: 'Price History', content: _jsx("p", { children: "Content for Tab 2" }) },
10
- { label: 'Price Estimator', content: _jsx("p", { children: "Content for Tab 3" }) }
11
+ { title: 'Information', getContent: content1 },
12
+ { title: 'Price History', getContent: content2 },
13
+ { title: 'Price Estimator', getContent: content3 }
11
14
  ];
12
15
  let columns = {
13
16
  "id": "ID",
@@ -38,6 +41,6 @@ export function App() {
38
41
  return row[column];
39
42
  }
40
43
  let table = useRef(null);
41
- 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(NSTabBar, { tabs: tabs }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
44
+ 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' })] }));
42
45
  }
43
46
  //# sourceMappingURL=App.js.map
package/dist/App.js.map CHANGED
@@ -1 +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,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,EAAE,IAAI,GAAI,EACxB,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACrI,CACH,CAAC;AACH,CAAC"}
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,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAGlB,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC,0CAAsB,CAAC;IAC5C,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC,0CAAsB,CAAC;IAC5C,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC,0CAAsB,CAAC;IAC5C,MAAM,IAAI,GAAG;QACZ,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE;QAC9C,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE;QAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE;KAClD,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 ADDED
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import { IBaseComponentProps } from "../props/IBaseComponentProps";
3
+ export interface NSTabPageTab {
4
+ title: string;
5
+ getContent: () => React.ReactNode;
6
+ }
7
+ export interface NSTabPageProps extends IBaseComponentProps {
8
+ tabs: NSTabPageTab[];
9
+ }
10
+ export interface NSTabPageState {
11
+ activeTabIndex: number;
12
+ }
13
+ export declare function NSTabPage(props: NSTabPageProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSTabPage.js ADDED
@@ -0,0 +1,9 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import Styles from './NSTabPage.module.css';
4
+ import { useState } from "react";
5
+ export function NSTabPage(props) {
6
+ const [state, setState] = useState({ activeTabIndex: 0 });
7
+ return (_jsx("div", { className: `container ${Styles.ns_tab_page}`, children: _jsxs("div", { className: ` ${Styles.ns_tab_page_panel}`, 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() })] }) }));
8
+ }
9
+ //# sourceMappingURL=NSTabPage.js.map
package/dist/components/NSTabPage.js.map ADDED
@@ -0,0 +1 @@
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,cAAK,SAAS,EAAE,aAAa,MAAM,CAAC,WAAW,EAAE,YAC7C,eAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,EAAE,aAC1C,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,GACJ,CACT,CAAC;AACN,CAAC"}
package/dist/components/NSTabPage.module.css ADDED
@@ -0,0 +1,42 @@
1
+ .ns_tab_page_panel {
2
+ border-radius: 8px;
3
+ overflow: hidden;
4
+ background: #141B5C;
5
+ padding: 16px;
6
+ }
7
+
8
+ .ns_tab_page_panel ul {
9
+ list-style-type: none;
10
+ margin: 0;
11
+ padding: 0;
12
+ display: flex;
13
+ }
14
+
15
+ .ns_tab_page_panel li {
16
+ text-align: center;
17
+ padding: 14px 16px;
18
+ cursor: pointer;
19
+ color: #fff;
20
+ font-size: 16px;
21
+ font-weight: 600;
22
+ }
23
+
24
+ .ns_tab_page_panel li:last-child {
25
+ border-right: none;
26
+ }
27
+
28
+ .ns_tab_page_panel li.active {
29
+ background-color: #fff;
30
+ border-radius: 8px 8px 0 0;
31
+ color: #141B5C;
32
+ }
33
+
34
+ .ns_tab_content {
35
+ padding: 16px;
36
+ border-radius: 0 8px 8px 8px;
37
+ background-color: #fff;
38
+ }
39
+
40
+ .ns_tab_page {
41
+ padding: 0 48px;
42
+ }
package/dist/main.d.ts CHANGED
@@ -38,7 +38,7 @@ export * from "./components/NSLinkGreen";
38
38
  export * from "./components/NSLinkRed";
39
39
  export * from "./components/NSPagination";
40
40
  export * from "./components/NSTable";
41
- export * from "./components/NSTabBar";
41
+ export * from "./components/NSTabPage";
42
42
  export * from "./components/NSTitle";
43
43
  export * from "./pages/NSLoginPage";
44
44
  export * from "./pages/NSNotFoundPage";
package/dist/main.js CHANGED
@@ -38,7 +38,7 @@ export * from "./components/NSLinkGreen";
38
38
  export * from "./components/NSLinkRed";
39
39
  export * from "./components/NSPagination";
40
40
  export * from "./components/NSTable";
41
- export * from "./components/NSTabBar";
41
+ export * from "./components/NSTabPage";
42
42
  export * from "./components/NSTitle";
43
43
  export * from "./pages/NSLoginPage";
44
44
  export * from "./pages/NSNotFoundPage";
package/dist/main.js.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.89",
11
+ "version": "1.3.91",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
@@ -63,4 +63,4 @@
63
63
  "last 1 safari version"
64
64
  ]
65
65
  }
66
- }
66
+ }
package/src/App.tsx CHANGED
@@ -1,14 +1,18 @@
1
1
  import './App.css';
2
2
  import 'bootstrap/dist/css/bootstrap.min.css';
3
- import { NSFooter, NSHeader, NSTable, NSTabBar } from './main';
3
+ import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
4
4
  import { useRef } from 'react';
5
5
 
6
6
  export function App()
7
7
  {
8
+
9
+ let content1 = () => <p>Content for Tab</p>;
10
+ let content2 = () => <p>Content for Tab</p>;
11
+ let content3 = () => <p>Content for Tab</p>;
8
12
  const tabs = [
9
- { label: 'Information', content: <p>Content for Tab 1</p> },
10
- { label: 'Price History', content: <p>Content for Tab 2</p> },
11
- { label: 'Price Estimator', content: <p>Content for Tab 3</p> }
13
+ { title: 'Information', getContent: content1 },
14
+ { title: 'Price History', getContent: content2 },
15
+ { title: 'Price Estimator', getContent: content3 }
12
16
  ];
13
17
  let columns = {
14
18
  "id": "ID",
@@ -68,7 +72,7 @@ export function App()
68
72
  getRowKey={row => row.id.toString()}
69
73
  />
70
74
  </div>
71
- <NSTabBar tabs={tabs} />
75
+ <NSTabPage tabs={tabs} />
72
76
  <NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
73
77
  </>
74
78
  );
package/src/components/NSTabPage.module.css ADDED
@@ -0,0 +1,42 @@
1
+ .ns_tab_page_panel {
2
+ border-radius: 8px;
3
+ overflow: hidden;
4
+ background: #141B5C;
5
+ padding: 16px;
6
+ }
7
+
8
+ .ns_tab_page_panel ul {
9
+ list-style-type: none;
10
+ margin: 0;
11
+ padding: 0;
12
+ display: flex;
13
+ }
14
+
15
+ .ns_tab_page_panel li {
16
+ text-align: center;
17
+ padding: 14px 16px;
18
+ cursor: pointer;
19
+ color: #fff;
20
+ font-size: 16px;
21
+ font-weight: 600;
22
+ }
23
+
24
+ .ns_tab_page_panel li:last-child {
25
+ border-right: none;
26
+ }
27
+
28
+ .ns_tab_page_panel li.active {
29
+ background-color: #fff;
30
+ border-radius: 8px 8px 0 0;
31
+ color: #141B5C;
32
+ }
33
+
34
+ .ns_tab_content {
35
+ padding: 16px;
36
+ border-radius: 0 8px 8px 8px;
37
+ background-color: #fff;
38
+ }
39
+
40
+ .ns_tab_page {
41
+ padding: 0 48px;
42
+ }
package/src/components/NSTabPage.tsx ADDED
@@ -0,0 +1,48 @@
1
+ "use client";
2
+ import Styles from './NSTabPage.module.css';
3
+ import { IBaseComponentProps } from "../props/IBaseComponentProps";
4
+ import { useState } from "react";
5
+
6
+ export interface NSTabPageTab
7
+ {
8
+ title: string;
9
+ getContent: () => React.ReactNode;
10
+ }
11
+
12
+ export interface NSTabPageProps extends IBaseComponentProps
13
+ {
14
+ tabs: NSTabPageTab[]
15
+ }
16
+
17
+ export interface NSTabPageState
18
+ {
19
+ activeTabIndex: number
20
+ }
21
+
22
+ export function NSTabPage(props: NSTabPageProps)
23
+ {
24
+ const [state, setState] = useState<NSTabPageState>({ activeTabIndex: 0 });
25
+
26
+ return (
27
+ <div className={`container ${Styles.ns_tab_page}`}>
28
+ <div className={` ${Styles.ns_tab_page_panel}`}>
29
+ <ul>
30
+ {
31
+ props.tabs.map((tab, index) => (
32
+ <li
33
+ key={index}
34
+ className={state.activeTabIndex === index ? Styles.active : ''}
35
+ onClick={() => setState({ activeTabIndex: index })}
36
+ >
37
+ {tab.title}
38
+ </li>
39
+ ))
40
+ }
41
+ </ul>
42
+ <div className={Styles.ns_tab_content}>
43
+ {props.tabs[state.activeTabIndex].getContent()}
44
+ </div>
45
+ </div>
46
+ </div>
47
+ );
48
+ }
package/src/main.ts CHANGED
@@ -38,7 +38,7 @@ export * from "./components/NSLinkGreen";
38
38
  export * from "./components/NSLinkRed";
39
39
  export * from "./components/NSPagination";
40
40
  export * from "./components/NSTable";
41
- export * from "./components/NSTabBar";
41
+ export * from "./components/NSTabPage";
42
42
  export * from "./components/NSTitle";
43
43
  export * from "./pages/NSLoginPage";
44
44
  export * from "./pages/NSNotFoundPage";
package/dist/components/NSTabBar.d.ts DELETED
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { IBaseComponentProps } from "../props/IBaseComponentProps";
3
- interface TabRow {
4
- label: string;
5
- content: React.ReactNode;
6
- }
7
- export interface NSTabBarProps extends IBaseComponentProps {
8
- tabs: TabRow[];
9
- }
10
- export declare function NSTabBar(props: NSTabBarProps): import("react/jsx-runtime").JSX.Element;
11
- export {};
package/dist/components/NSTabBar.js DELETED
@@ -1,12 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import Styles from './NSTabBar.module.css';
4
- import { useState } from "react";
5
- export function NSTabBar(props) {
6
- const [activeTab, setActiveTab] = useState(1);
7
- const handleTabClick = (index) => {
8
- setActiveTab(index);
9
- };
10
- 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 })] }));
11
- }
12
- //# sourceMappingURL=NSTabBar.js.map
package/dist/components/NSTabBar.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"NSTabBar.js","sourceRoot":"","sources":["../../src/components/NSTabBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,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 DELETED
@@ -1,36 +0,0 @@
1
- .ns_tab_bar {
2
- border-radius: 8px;
3
- overflow: hidden;
4
- background: #141B5C66;
5
- padding: 16px;
6
- }
7
-
8
- .ns_tab_bar ul {
9
- list-style-type: none;
10
- margin: 0;
11
- padding: 0;
12
- display: flex;
13
- }
14
-
15
- .ns_tab_bar li {
16
- flex: 1;
17
- text-align: center;
18
- padding: 10px;
19
- cursor: pointer;
20
- border-right: 1px solid #ccc;
21
- }
22
-
23
- .ns_tab_bar li:last-child {
24
- border-right: none;
25
- }
26
-
27
- .ns_tab_bar li.active {
28
- background-color: rgba(255, 255, 255, 0.6);
29
- border-radius: 8px 8px 0 0;
30
- }
31
-
32
- .ns_tab_content {
33
- padding: 16px;
34
- border-radius: 0 0 8px 8px;
35
- background-color: #FFFFFF99;
36
- }
package/src/components/NSTabBar.module.css DELETED
@@ -1,36 +0,0 @@
1
- .ns_tab_bar {
2
- border-radius: 8px;
3
- overflow: hidden;
4
- background: #141B5C66;
5
- padding: 16px;
6
- }
7
-
8
- .ns_tab_bar ul {
9
- list-style-type: none;
10
- margin: 0;
11
- padding: 0;
12
- display: flex;
13
- }
14
-
15
- .ns_tab_bar li {
16
- flex: 1;
17
- text-align: center;
18
- padding: 10px;
19
- cursor: pointer;
20
- border-right: 1px solid #ccc;
21
- }
22
-
23
- .ns_tab_bar li:last-child {
24
- border-right: none;
25
- }
26
-
27
- .ns_tab_bar li.active {
28
- background-color: rgba(255, 255, 255, 0.6);
29
- border-radius: 8px 8px 0 0;
30
- }
31
-
32
- .ns_tab_content {
33
- padding: 16px;
34
- border-radius: 0 0 8px 8px;
35
- background-color: #FFFFFF99;
36
- }
package/src/components/NSTabBar.tsx DELETED
@@ -1,42 +0,0 @@
1
- "use client";
2
- import Styles from './NSTabBar.module.css';
3
- import { IBaseComponentProps } from "../props/IBaseComponentProps";
4
- import { useState } from "react";
5
-
6
- interface TabRow
7
- {
8
- label: string;
9
- content: React.ReactNode;
10
- }
11
- export interface NSTabBarProps extends IBaseComponentProps
12
- {
13
- tabs: TabRow[]
14
- }
15
-
16
- export function NSTabBar(props: NSTabBarProps)
17
- {
18
- const [activeTab, setActiveTab] = useState(1);
19
-
20
- const handleTabClick = (index: number) =>
21
- {
22
- setActiveTab(index);
23
- };
24
- return (
25
- <div className={`container ${Styles.ns_tab_bar}`}>
26
- <ul>
27
- {props.tabs.map((tab, index) => (
28
- <li
29
- key={index}
30
- className={activeTab === index ? Styles.active : ''}
31
- onClick={() => handleTabClick(index)}
32
- >
33
- {tab.label}
34
- </li>
35
- ))}
36
- </ul>
37
- <div className={Styles.ns_tab_content}>
38
- {props.tabs[activeTab].content}
39
- </div>
40
- </div>
41
- );
42
- }