namirasoft-site-react 1.3.85 → 1.3.87

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/NSCopyToClipboard.js

@@ -7,6 +7,6 @@ export function NSCopyToClipboard(props) {
         if (navigator.clipboard && navigator.clipboard.writeText)
             navigator.clipboard.writeText(props.value);
     }
-    return (_jsxs("div", { id: props.id, className: `${Styles.ns_copy_to_clipboard} p-2 ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("span", { className: Styles.ns_copy_to_clipboard_title, children: props.title }), _jsxs("div", { className: Styles.ns_copy_to_clipboard_value, children: [_jsx("img", { className: Styles.ns_copy_to_clipboard_icon, src: IconInputString, alt: "Copy Icon", width: 24, height: 24, onClick: copyToClipboard }), _jsx("span", { children: props.value })] })] }));
+    return (_jsx("div", { id: props.id, className: `${Styles.ns_copy_to_clipboard} p-2 ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_copy_to_clipboard_value, children: [_jsx("p", { className: "m-0", children: props.value }), _jsx("img", { className: Styles.ns_copy_to_clipboard_icon, src: IconInputString, alt: "Copy Icon", width: 24, height: 24, onClick: copyToClipboard })] }) }));
 }
 //# sourceMappingURL=NSCopyToClipboard.js.map

package/dist/components/NSCopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSCopyToClipboard.js","sourceRoot":"","sources":["../../src/components/NSCopyToClipboard.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AACpD,OAAO,eAAe,MAAM,sCAAsC,CAAC;AASnE,MAAM,UAAU,iBAAiB,CAAC,KAA8B;;IAE5D,SAAS,eAAe;QAEpB,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS;YACpD,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;IACD,OAAO,CACH,eAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAoB,QAAQ,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC7E,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,eAAM,SAAS,EAAE,MAAM,CAAC,0BAA0B,YAAG,KAAK,CAAC,KAAK,GAAQ,EACxE,eAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,aAC7C,cACI,SAAS,EAAE,MAAM,CAAC,yBAAyB,EAC3C,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,WAAW,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,eAAe,GAC1B,EACF,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACxB,IACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"NSCopyToClipboard.js","sourceRoot":"","sources":["../../src/components/NSCopyToClipboard.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AACpD,OAAO,eAAe,MAAM,sCAAsC,CAAC;AASnE,MAAM,UAAU,iBAAiB,CAAC,KAA8B;;IAE5D,SAAS,eAAe;QAEpB,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS;YACpD,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;IACD,OAAO,CACH,cAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAoB,QAAQ,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC7E,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,eAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,aAC7C,YAAG,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAK,EACpC,cACI,SAAS,EAAE,MAAM,CAAC,yBAAyB,EAC3C,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,WAAW,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,eAAe,GAC1B,IACA,GACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSCopyToClipboard.module.css

@@ -1,10 +1,11 @@
 .ns_copy_to_clipboard {
     display: flex;
     flex-direction: column;
-    width: 272px;
+    width: 416px;
     color: #fff;
     position: relative;
     max-width: 100%;
+    margin: 0 auto;
 }
 
 .ns_copy_to_clipboard_value {
@@ -12,24 +13,21 @@
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
-    background-color: #0000;
+    background-color: rgba(20, 27, 92, 0.3);
     text-align: center;
-    border: 1px solid rgba(20, 27, 92, 1);
     overflow: hidden;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    border-radius: 8px;
 }
 
-.ns_copy_to_clipboard_value span {
+.ns_copy_to_clipboard_value p {
     color: rgba(20, 27, 92, 1);
     width: 100%;
     display: inline-block;
     overflow: hidden;
-}
-
-.ns_copy_to_clipboard_icon {
-    position: absolute;
-    right: 20px;
-    top: 64%;
-    z-index: 1;
+    word-wrap: break-word;
 }
 
 .ns_copy_to_clipboard_title {

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/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.85",
+    "version": "1.3.87",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -22,8 +22,8 @@
     },
     "dependencies": {
         "@types/node": "^20.12.7",
-        "@types/react": "^18.2.79",
-        "@types/react-dom": "^18.2.25",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.0",
         "antd": "^5.16.4",
         "bootstrap": "^5.3.3",
         "copyfiles": "^2.4.1",
@@ -31,12 +31,12 @@
         "namirasoft-api-link": "^1.3.3",
         "namirasoft-core": "^1.3.19",
         "path-browserify": "^1.0.1",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-app-rewired": "^2.2.1",
         "react-bootstrap": "^2.10.2",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-phone-input-2": "^2.15.1",
-        "react-phone-number-input": "^3.4.0",
+        "react-phone-number-input": "^3.4.1",
         "react-router-dom": "^6.23.0",
         "react-scripts": "5.0.1"
     },

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/NSCopyToClipboard.module.css

@@ -1,10 +1,11 @@
 .ns_copy_to_clipboard {
     display: flex;
     flex-direction: column;
-    width: 272px;
+    width: 416px;
     color: #fff;
     position: relative;
     max-width: 100%;
+    margin: 0 auto;
 }
 
 .ns_copy_to_clipboard_value {
@@ -12,24 +13,21 @@
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 400;
-    background-color: #0000;
+    background-color: rgba(20, 27, 92, 0.3);
     text-align: center;
-    border: 1px solid rgba(20, 27, 92, 1);
     overflow: hidden;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    border-radius: 8px;
 }
 
-.ns_copy_to_clipboard_value span {
+.ns_copy_to_clipboard_value p {
     color: rgba(20, 27, 92, 1);
     width: 100%;
     display: inline-block;
     overflow: hidden;
-}
-
-.ns_copy_to_clipboard_icon {
-    position: absolute;
-    right: 20px;
-    top: 64%;
-    z-index: 1;
+    word-wrap: break-word;
 }
 
 .ns_copy_to_clipboard_title {

package/src/components/NSCopyToClipboard.tsx

@@ -20,8 +20,8 @@ export function NSCopyToClipboard(props: INSCopyToClipboardProps)
             className={`${Styles.ns_copy_to_clipboard} p-2 ${props.classList?.join(" ")}`}
             style={props.style}
         >
-            <span className={Styles.ns_copy_to_clipboard_title}>{props.title}</span>
             <div className={Styles.ns_copy_to_clipboard_value}>
+                <p className="m-0">{props.value}</p>
                 <img
                     className={Styles.ns_copy_to_clipboard_icon}
                     src={IconInputString}
@@ -30,7 +30,6 @@ export function NSCopyToClipboard(props: INSCopyToClipboardProps)
                     height={24}
                     onClick={copyToClipboard}
                 />
-                <span>{props.value}</span>
             </div>
         </div>
     );

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/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";