namirasoft-site-react 1.3.22 → 1.3.24

package/dist/App.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination, NSInputCopy, NSInputSearch } from './main';
+import { NSButtonBlue, NSButtonBlueVector, NSInputCopy, NSLayoutTitle, NSPagination } from './main';
 export function App() {
-    return (_jsx("div", { className: "App", children: _jsxs(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", description: 'paragraph', children: [_jsx(NSPagination, { page: 1, size: 25 }), _jsx(NSButtonBlue, { title: 'Apply', onClick: () => "" }), _jsx(NSButtonBlueVector, { title: 'New', onClick: () => "", vector: '/assets/images/add-vector.png' }), _jsx(NSInputCopy, { title: "Your Token" }), _jsx(NSInputSearch, {})] }) }));
+    return (_jsx("div", { className: "App", children: _jsxs(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", description: '', children: [_jsx(NSPagination, { page: 1, size: 25 }), _jsx(NSButtonBlue, { title: 'Apply', onClick: () => "" }), _jsx(NSButtonBlueVector, { title: 'New', onClick: () => "", vector: '/assets/images/add-vector.png' }), _jsx(NSInputCopy, { title: "Your Token" })] }) }));
 }
 //# 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,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEnH,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,KAAK,YAChB,MAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,aAChG,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EACnC,KAAC,YAAY,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAI,EACjD,KAAC,kBAAkB,IAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAC,+BAA+B,GAAG,EAC5F,KAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG,EAClC,KAAC,aAAa,KAAG,IAEL,GACd,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEpG,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,KAAK,YAChB,MAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,EAAC,WAAW,EAAC,EAAE,aACvF,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EACnC,KAAC,YAAY,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAI,EACjD,KAAC,kBAAkB,IAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAC,+BAA+B,GAAG,EAC5F,KAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG,IACtB,GACd,CACT,CAAC;AACN,CAAC"}

package/dist/assets/images/icon-select-box.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.70912 12.1877C8.93017 13.4695 7.06983 13.4695 6.29088 12.1877L1.18647 3.7887C0.37647 2.45587 1.33594 0.749999 2.8956 0.749999L13.1044 0.75C14.6641 0.75 15.6235 2.45587 14.8135 3.7887L9.70912 12.1877Z" fill="#141B5C"/>
+</svg>

package/dist/components/NSInputSearch.module.css

@@ -18,7 +18,7 @@
 .ns_input_icon {
     position: absolute;
     right: 20px;
-    top: 26%;
+    top: 34%;
 }
 
 .ns_input_title {

package/dist/components/NSLayout.module.css

@@ -4,7 +4,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 
 .ns_header {

package/dist/components/NSLayoutTitle.js

@@ -5,7 +5,8 @@ import { Component } from 'react';
 import { NSLayout } from './NSLayout';
 export class NSLayoutTitle extends Component {
     render() {
-        return (_jsxs(NSLayout, { scope: this.props.scope, logo: this.props.logo, children: [_jsxs("div", { className: '', children: [_jsx("h1", { className: Styles.title, children: this.props.title }), _jsx("p", { className: Styles.description, children: this.props.description })] }), this.props.children] }));
+        var _a;
+        return (_jsxs(NSLayout, { scope: this.props.scope, logo: this.props.logo, children: [_jsxs("div", { children: [_jsx("h1", { className: Styles.title, children: this.props.title }), _jsx("p", { className: Styles.description, style: { display: this.props.description == ((_a = this.props.description) === null || _a === void 0 ? void 0 : _a.length) ? "none" : "block" }, children: this.props.description })] }), this.props.children] }));
     }
 }
 //# sourceMappingURL=NSLayoutTitle.js.map

package/dist/components/NSLayoutTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLayoutTitle.js","sourceRoot":"","sources":["../../src/components/NSLayoutTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAWtC,MAAM,OAAO,aAAc,SAAQ,SAA6B;IACtD,MAAM;QAEd,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,aACvD,eAAK,SAAS,EAAC,EAAE,aAChB,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,EACpD,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAK,IACzD,EACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IACV,CACX,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSLayoutTitle.js","sourceRoot":"","sources":["../../src/components/NSLayoutTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC,MAAM,OAAO,aAAc,SAAQ,SAA6B;IACtD,MAAM;;QAUd,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,aACvD,0BACC,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,EACpD,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,MAAM,CAAA,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAK,IACzH,EACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IACV,CACX,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSelectBox.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Styles from "./NSSelectBox.module.css";
 import { Select, Space } from 'antd';
+import IconSelectBox from '../assets/images/icon-select-box.svg';
 export class NSSelectBox extends React.Component {
     constructor(props) {
         super(props);
@@ -18,7 +19,7 @@ export class NSSelectBox extends React.Component {
         return this.state.value;
     }
     render() {
-        return (_jsx("div", { className: `${Styles.ns_input_parent} p-2`, children: _jsx(Select, { mode: "multiple", style: { width: '100%' }, className: Styles.ns_input_select, placeholder: "Combo Box", onChange: this.setValue, optionLabelProp: "label", options: this.props.options, optionRender: (option) => (_jsx(Space, { className: Styles.ns_input_select_option, children: option.data.desc })) }) }));
+        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx(Select, { mode: "multiple", style: { width: '100%' }, className: Styles.ns_input_select, placeholder: "Combo Box", onChange: this.setValue, optionLabelProp: "label", options: this.props.options, optionRender: (option) => (_jsx(Space, { className: Styles.ns_input_select_option, children: option.data.desc })), suffixIcon: _jsx("img", { src: IconSelectBox, alt: "SelectBox Icon" }) })] }));
     }
 }
 //# sourceMappingURL=NSSelectBox.js.map

package/dist/components/NSSelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSelectBox.js","sourceRoot":"","sources":["../../src/components/NSSelectBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAerC,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA6C;IAChF,YAAY,KAAuB;QAE/B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;SACZ,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,KAAe;QAEpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,YAC3C,KAAC,MAAM,IAEH,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EACxB,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,KAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,GACb,CACX,GACH,GACA,CACT,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSSelectBox.js","sourceRoot":"","sources":["../../src/components/NSSelectBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAErC,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAajE,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA6C;IAChF,YAAY,KAAuB;QAE/B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;SACZ,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,KAAe;QAEpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,KAAC,MAAM,IACH,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EACxB,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,KAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,GACb,CACX,EACD,UAAU,EAAE,cAAK,GAAG,EAAE,aAAa,EAAE,GAAG,EAAC,gBAAgB,GAAG,GAC9D,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSSelectBox.module.css

@@ -4,7 +4,7 @@
 }
 
 .ns_input_select {
-    height: 48px;
+    height: 45px;
     width: 304px !important;
 }
 

package/dist/components/NSTable.d.ts

@@ -1,4 +1,3 @@
-import "./NSTable.modules.css";
 import { Component } from 'react';
 export interface NSTableProps<RowType> {
     columns: {

package/dist/components/NSTable.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./NSTable.modules.css";
+import Styles from './NSTable.module.css';
 import { Component } from 'react';
 export class NSTable extends Component {
     constructor(props) {
@@ -15,7 +15,7 @@ export class NSTable extends Component {
     }
     render() {
         let column_keys = Object.keys(this.state.columns);
-        return (_jsx("div", { className: "project_list_container", children: _jsxs("table", { className: "table", children: [_jsx("thead", { className: "thead", children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: "tbody", children: this.state.rows.map((row, rowIndex) => _jsx("tr", { children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }) }));
+        return (_jsxs("div", { className: Styles.project_list_container, children: [_jsxs("table", { className: Styles.table, children: [_jsx("thead", { className: Styles.thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsxs("div", { className: Styles.button_group_desktop, children: [_jsxs("button", { onClick: () => window.print(), className: Styles.export_button, children: [_jsx("img", { src: "/assets/images/export-vector.png", alt: "Export Table Data", width: 13, height: 16 }), "Export"] }), _jsxs("button", { onClick: () => window.location.reload(), className: Styles.refresh_button, children: [_jsx("img", { src: "/assets/images/refresh-vector.png", alt: "Refresh Table Contnet", width: 15, height: 16 }), "Refresh"] })] })] }));
     }
 }
 //# sourceMappingURL=NSTable.js.map

package/dist/components/NSTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,OAAO,OAAiB,SAAQ,SAAuD;IAEzF,YAAY,KAA4B;QAEpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,OAAO,CACH,cAAK,SAAS,EAAC,wBAAwB,YACnC,iBAAO,SAAS,EAAC,OAAO,aACpB,gBAAO,SAAS,EAAC,OAAO,YACpB,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,aAAqB,KAAK,EAAC,KAAK,YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAAvD,UAAU,CAAmD,CAAC,GACrG,GACD,EACR,gBAAO,SAAS,EAAC,OAAO,YAEhB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,uBAEQ,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,cACtD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtD,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,GAET,IACL,GACL,CACV,CAAA;IACL,CAAC;CACJ"}
+{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,OAAO,OAAiB,SAAQ,SAAuD;IAEzF,YAAY,KAA4B;QAEpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,aACzC,iBAAO,SAAS,EAAE,MAAM,CAAC,KAAK,aAC1B,gBAAO,SAAS,EAAE,MAAM,CAAC,KAAK,YAC1B,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,aAAqB,KAAK,EAAC,KAAK,YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAAvD,UAAU,CAAmD,CAAC,GACrG,GACD,EACR,gBAAO,SAAS,EAAE,MAAM,CAAC,KAAK,YAEtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,uBAEQ,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,cACtD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtD,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,GAET,IACL,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aACvC,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,aAAE,cAAK,GAAG,EAAC,kCAAkC,EAAC,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,cAAe,EACpL,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,aAAE,cAAK,GAAG,EAAC,mCAAmC,EAAC,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,eAAgB,IACnM,IACH,CACV,CAAA;IACL,CAAC;CACJ"}

package/dist/components/{NSTable.modules.css → NSTable.module.css}

@@ -1,29 +1,65 @@
 .thead th {
-    background-color: rgb(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 1);
-    border: none;
+    background-color: rgba(20, 27, 92, 1);
+    font-size: 16px;
+    font-weight: 300;
+    padding: 16px;
+    color: white;
+    font-size: 16px;
 }
 
-.tbody th {
-    background-color: rgb(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 1);
-    border: none;
+.tbody td {
+    background-color: rgb(173, 178, 206);
+    color: rgba(20, 27, 92, 1);
+    padding: 8px 16px;
+    font-size: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+
 }
 
-.tbody td {
-    background-color: rgb(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 1);
-    border: none;
+table {
+    width: 100%;
 }
 
 .project_list_container {
-    border: none;
     text-align: left;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+.button_group_desktop {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    gap: 48px;
+    padding: 24px 0;
+}
+
+.button_group_desktop button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 8px;
+    width: 128px;
+    height: 48px;
+    gap: 10px;
+    text-decoration: none;
+    color: black;
+    background-color: transparent;
+}
+
+.export_button {
+    border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.refresh_button {
+    border: 1px solid rgba(3, 119, 255, 1);
 }
 
 @media only screen and (max-width:600px) {
     .project_list_container {
-        overflow: scroll;
+        overflow: auto;
     }
 }
 

package/package.json

@@ -8,7 +8,7 @@
   "framework": "npm",
   "application": "package",
   "private": false,
-  "version": "1.3.22",
+  "version": "1.3.24",
   "author": "Amir Abolhasani",
   "license": "MIT",
   "main": "./dist/main.js",

package/src/App.tsx

@@ -1,18 +1,16 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination, NSInputCopy, NSInputSearch } from './main';
+import { NSButtonBlue, NSButtonBlueVector, NSInputCopy, NSLayoutTitle, NSPagination } from './main';
 
 export function App()
 {
     return (
         <div className="App">
-            <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft" description='paragraph'>
+            <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft" description=''>
                 <NSPagination page={1} size={25} />
                 <NSButtonBlue title='Apply' onClick={() => ""} />
                 <NSButtonBlueVector title='New' onClick={() => ""} vector='/assets/images/add-vector.png' />
                 <NSInputCopy title="Your Token" />
-                <NSInputSearch />
-
             </NSLayoutTitle>
         </div>
     );

package/src/assets/images/icon-select-box.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.70912 12.1877C8.93017 13.4695 7.06983 13.4695 6.29088 12.1877L1.18647 3.7887C0.37647 2.45587 1.33594 0.749999 2.8956 0.749999L13.1044 0.75C14.6641 0.75 15.6235 2.45587 14.8135 3.7887L9.70912 12.1877Z" fill="#141B5C"/>
+</svg>

package/src/components/NSInputSearch.module.css

@@ -18,7 +18,7 @@
 .ns_input_icon {
     position: absolute;
     right: 20px;
-    top: 26%;
+    top: 34%;
 }
 
 .ns_input_title {

package/src/components/NSLayout.module.css

@@ -4,7 +4,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 
 .ns_header {

package/src/components/NSLayoutTitle.tsx

@@ -13,15 +13,23 @@ export interface NSLayoutTitleProps
 	description?: string;
 	children: ReactNode;
 }
-
 export class NSLayoutTitle extends Component<NSLayoutTitleProps> {
 	override render()
 	{
+		// var x = this.props.description
+		// if (this.props.description == this.props.description?.length)
+		// {
+
+		// } else
+		// {
+
+		// }
 		return (
 			<NSLayout scope={this.props.scope} logo={this.props.logo} >
-				<div className=''>
+				<div>
 					<h1 className={Styles.title}>{this.props.title}</h1>
-					<p className={Styles.description}>{this.props.description}</p>
+					<p className={Styles.description}
+						style={{ display: this.props.description == this.props.description?.length ? "none" : "block" }}>{this.props.description}</p>
 				</div>
 				{this.props.children}
 			</NSLayout>

package/src/components/NSSelectBox.module.css

@@ -4,7 +4,7 @@
 }
 
 .ns_input_select {
-    height: 48px;
+    height: 45px;
     width: 304px !important;
 }
 

package/src/components/NSSelectBox.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import Styles from "./NSSelectBox.module.css";
 import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';
-// import { CaretDownOutlined } from '@ant-design/icons'
+import IconSelectBox from '../assets/images/icon-select-box.svg';
 
 export interface NSSelectBoxProps
 {
@@ -38,8 +38,8 @@ export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxSt
     {
         return (
             <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
                 <Select
-                    // suffixIcon={<CaretDownOutlined />}
                     mode="multiple"
                     style={{ width: '100%' }}
                     className={Styles.ns_input_select}
@@ -52,6 +52,7 @@ export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxSt
                             {option.data.desc}
                         </Space>
                     )}
+                    suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
                 />
             </div>
         );

package/src/components/{NSTable.modules.css → NSTable.module.css}

@@ -1,29 +1,65 @@
 .thead th {
-    background-color: rgb(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 1);
-    border: none;
+    background-color: rgba(20, 27, 92, 1);
+    font-size: 16px;
+    font-weight: 300;
+    padding: 16px;
+    color: white;
+    font-size: 16px;
 }
 
-.tbody th {
-    background-color: rgb(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 1);
-    border: none;
+.tbody td {
+    background-color: rgb(173, 178, 206);
+    color: rgba(20, 27, 92, 1);
+    padding: 8px 16px;
+    font-size: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+
 }
 
-.tbody td {
-    background-color: rgb(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 1);
-    border: none;
+table {
+    width: 100%;
 }
 
 .project_list_container {
-    border: none;
     text-align: left;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+.button_group_desktop {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    gap: 48px;
+    padding: 24px 0;
+}
+
+.button_group_desktop button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 8px;
+    width: 128px;
+    height: 48px;
+    gap: 10px;
+    text-decoration: none;
+    color: black;
+    background-color: transparent;
+}
+
+.export_button {
+    border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.refresh_button {
+    border: 1px solid rgba(3, 119, 255, 1);
 }
 
 @media only screen and (max-width:600px) {
     .project_list_container {
-        overflow: scroll;
+        overflow: auto;
     }
 }
 

package/src/components/NSTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import "./NSTable.modules.css";
+import Styles from './NSTable.module.css';
 import { Component } from 'react';
 
 export interface NSTableProps<RowType>
@@ -37,14 +37,14 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
     {
         let column_keys = Object.keys(this.state.columns);
         return (
-            <div className="project_list_container">
-                <table className="table">
-                    <thead className="thead">
+            <div className={Styles.project_list_container}>
+                <table className={Styles.table}>
+                    <thead className={Styles.thead}>
                         <tr>
                             {column_keys.map(column_key => <th key={column_key} scope="col">{this.state.columns[column_key]}</th>)}
                         </tr>
                     </thead>
-                    <tbody className="tbody">
+                    <tbody className={Styles.tbody}>
                         {
                             this.state.rows.map((row, rowIndex) =>
                                 <tr key={this.props.getRowKey(row, rowIndex)}>
@@ -59,6 +59,10 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                         }
                     </tbody >
                 </table>
+                <div className={Styles.button_group_desktop}>
+                    <button onClick={() => window.print()} className={Styles.export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
+                    <button onClick={() => window.location.reload()} className={Styles.refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
+                </div>
             </div >
         )
     }