namirasoft-site-react 1.3.38 → 1.3.40

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,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,KAAK,YAChB,KAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,YACxE,eAEM,GACM,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,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,KAAK,YAChB,KAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,YACxE,eACM,GACM,GACd,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSInputEmail.js

@@ -31,7 +31,7 @@ export class NSInputEmail extends React.Component {
         return this.state.value;
     }
     render() {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputEmail, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.setValue, type: "email", className: `${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`, placeholder: "Sample@gmail.com" })] }), this.state.error === true ? (_jsx(_Fragment, { children: _jsxs("div", { className: "d-flex justify-content-start align-items-center gap-2 ms-2 ", children: [_jsx("img", { className: "", src: Danger, alt: "icon", width: 13, height: 13 }), _jsx("span", { className: Styles.ns_input_error, children: "Enter a valid email. " })] }) })) : null] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputEmail, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.setValue, type: "email", className: `${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`, placeholder: "Sample@gmail.com" })] }), this.state.error === true ? (_jsx(_Fragment, { children: _jsxs("div", { className: "d-flex justify-content-start align-items-center gap-2 ms-2 ", children: [_jsx("img", { className: "", src: Danger, alt: "icon", width: 13, height: 13 }), _jsx("span", { className: Styles.ns_input_error, children: "Enter a valid email." })] }) })) : null] }));
     }
 }
 //# sourceMappingURL=NSInputEmail.js.map

package/dist/components/NSInputEmail.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSInputEmail.js","sourceRoot":"","sources":["../../src/components/NSInputEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAajD,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IACnF,YAAY,KAAwB;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,KAAK;SACf,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ,CAAC,CAAsC;QAE3C,IAAI,KAAK,GAAG,mJAAmJ,CAAC;QAChK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/B,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,CAAC;aAED,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC3D,CAAC;IACL,CAAC;IACD,eAAe,CAAC,KAAa;QAEzB,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,8BACI,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE,EACvF,WAAW,EAAC,kBAAkB,GAChC,IACA,EAEL,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CACzB,4BACI,eAAK,SAAS,EAAC,6DAA6D,aACxE,cACI,SAAS,EAAE,EAAE,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,sCAA8B,IAClE,GACP,CAAC,CAAC,CAAC,CAAC,IAAI,IAEhB,CACN,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSInputEmail.js","sourceRoot":"","sources":["../../src/components/NSInputEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAajD,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IACnF,YAAY,KAAwB;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,KAAK;SACf,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ,CAAC,CAAsC;QAE3C,IAAI,KAAK,GAAG,mJAAmJ,CAAC;QAChK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/B,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,CAAC;aAED,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC3D,CAAC;IACL,CAAC;IACD,eAAe,CAAC,KAAa;QAEzB,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,8BACI,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE,EACvF,WAAW,EAAC,kBAAkB,GAChC,IACA,EAEF,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CACxB,4BACI,eAAK,SAAS,EAAC,6DAA6D,aACxE,cACI,SAAS,EAAE,EAAE,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,qCAA6B,IACjE,GACP,CAAC,CAAC,CAAC,CAAC,IAAI,IAEpB,CACN,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSPanel.d.ts

@@ -0,0 +1,11 @@
+import { Component, ReactNode } from "react";
+export interface NSSectionProps {
+    children: ReactNode;
+    grid: boolean;
+}
+export interface NSSectionState {
+}
+export declare class NSPanel extends Component<NSSectionProps, NSSectionState> {
+    constructor(props: NSSectionProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/NSPanel.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import Styles from './NSPanel.module.css';
+export class NSPanel extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (_jsx("section", { className: this.props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column, children: this.props.children }));
+    }
+}
+//# sourceMappingURL=NSPanel.js.map

package/dist/components/NSPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSPanel.js","sourceRoot":"","sources":["../../src/components/NSPanel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAWzC,MAAM,OAAO,OAAQ,SAAQ,SAAyC;IAClE,YAAY,KAAqB;QAE7B,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,kBACI,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,YACzE,IAAI,CAAC,KAAK,CAAC,QAAQ,GACd,CACb,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSPanel.module.css

@@ -0,0 +1,35 @@
+.ns_panel_grid {
+    background-color: rgba(20, 27, 92, 0.3);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+margin: 0 auto;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+    }
+}
+
+.ns_panel_column {
+    background-color: rgba(20, 27, 92, 0.3);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    margin: 0 auto;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_column {
+        max-width: 700px;
+    }
+}

package/dist/components/NSSection.d.ts

@@ -3,6 +3,7 @@ import { BackgroundType } from "../types/Background";
 export interface NSSectionProps {
     children: ReactNode;
     background?: BackgroundType;
+    center_items?: boolean;
 }
 export interface NSSectionState {
     background?: BackgroundType;

package/dist/components/NSSection.js

@@ -16,11 +16,14 @@ export class NSSection extends Component {
     }
     render() {
         var _a, _b, _c;
+        let styles = [Styles.ns_section];
+        if (this.props.center_items)
+            styles.push(Styles.ns_section_center);
         return (_jsx("section", { style: {
                 backgroundImage: (_a = this.state.background) === null || _a === void 0 ? void 0 : _a.image,
                 backgroundColor: (_b = this.state.background) === null || _b === void 0 ? void 0 : _b.color,
                 backgroundPosition: (_c = this.state.background) === null || _c === void 0 ? void 0 : _c.position
-            }, className: Styles.ns_section, children: this.props.children }));
+            }, className: styles.join(" "), children: this.props.children }));
     }
 }
 //# sourceMappingURL=NSSection.js.map

package/dist/components/NSSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSection.js","sourceRoot":"","sources":["../../src/components/NSSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAc3C,MAAM,OAAO,SAAU,SAAQ,SAAyC;IACvE,YAAY,KAAqB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,UAAU,EAAE;gBACX,KAAK,EAAE,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,GAAG;gBACxC,KAAK,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC9B,QAAQ,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACpC;SACD,CAAA;IACF,CAAC;IACQ,MAAM;;QAEd,OAAO,CACN,kBAAS,KAAK,EACZ;gBACA,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACnD,EACD,SAAS,EAAE,MAAM,CAAC,UAAU,YAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GACX,CACV,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSection.js","sourceRoot":"","sources":["../../src/components/NSSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAe3C,MAAM,OAAO,SAAU,SAAQ,SAAyC;IAEvE,YAAY,KAAqB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,UAAU,EAAE;gBACX,KAAK,EAAE,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,GAAG;gBACxC,KAAK,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC9B,QAAQ,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACpC;SACD,CAAA;IACF,CAAC;IACQ,MAAM;;QAEd,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;YAC1B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACvC,OAAO,CACN,kBAAS,KAAK,EACZ;gBACA,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACnD,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,YAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,GACX,CACV,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSection.module.css

@@ -2,4 +2,10 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/dist/components/NSSpace.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAOD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IACpE,YAAY,KAAmB;QAE3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,IAAqB;QAE1B,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,GAAI,CACtH,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAOD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IAEpE,YAAY,KAAmB;QAE3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,IAAqB;QAE1B,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,GAAI,CACtH,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSTable.js

@@ -15,7 +15,7 @@ export class NSTable extends Component {
     }
     render() {
         let column_keys = Object.keys(this.state.columns);
-        return (_jsxs("div", { className: Styles.ns_project_list_container, children: [_jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_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.ns_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.ns_button_group_desktop, children: [_jsxs("button", { onClick: () => window.print(), className: Styles.ns_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.ns_refresh_button, children: [_jsx("img", { src: "/assets/images/refresh-vector.png", alt: "Refresh Table Contnet", width: 15, height: 16 }), "Refresh"] })] })] }));
+        return (_jsxs("div", { className: Styles.ns_project_list_container, children: [_jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_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.ns_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), { "data-label": this.state.columns[column], children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsxs("div", { className: Styles.ns_button_group_desktop, children: [_jsxs("button", { onClick: () => window.print(), className: Styles.ns_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.ns_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,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,yBAAyB,aAC5C,iBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC7B,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7B,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,QAAQ,YAEzB,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,uBAAuB,aAC1C,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,aAAE,cAAK,GAAG,EAAC,kCAAkC,EAAC,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,cAAe,EACvL,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,aAAE,cAAK,GAAG,EAAC,mCAAmC,EAAC,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,eAAgB,IACtM,IACH,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,yBAAyB,aAC5C,iBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC7B,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7B,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,QAAQ,YAEzB,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,kBAAc,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,YAC9F,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,uBAAuB,aAC1C,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,aAAE,cAAK,GAAG,EAAC,kCAAkC,EAAC,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,cAAe,EACvL,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,aAAE,cAAK,GAAG,EAAC,mCAAmC,EAAC,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,eAAgB,IACtM,IACH,CACV,CAAA;IACL,CAAC;CACJ"}

package/dist/components/NSTable.module.css

@@ -1,113 +1,105 @@
-.ns_thead th {
-    background-color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 300;
-    padding: 16px;
-    color: white;
-    font-size: 16px;
-}
+.ns_project_list_container {}
 
-.ns_tbody td {
-    background-color: rgb(173, 178, 206);
+.ns_table {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
     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);
 
 }
 
-.ns_table {
-    width: 100%;
-}
-
-.ns_project_list_container {
-    text-align: left;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-}
+.ns_table thead {
+    clip: rect(0 0 0 0);
+    position: fixed;
 
-.ns_button_group_desktop {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    gap: 48px;
-    padding: 24px 0;
 }
 
-.ns_button_group_desktop button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
+.ns_table tr {
     border-radius: 8px;
-    width: 128px;
-    height: 48px;
-    gap: 10px;
-    text-decoration: none;
-    color: black;
-    background-color: transparent;
+    padding: 16px;
+    margin: 10px;
+    display: block;
+    background-color: rgba(20, 27, 92, 0.3);
 }
 
-.ns_export_button {
-    border: 1px solid rgba(255, 148, 50, 1);
+.ns_table td {
+
+    display: block;
+    padding: 8px 0;
+    font-size: .8em;
+    text-align: right;
 }
 
-.ns_refresh_button {
-    border: 1px solid rgba(3, 119, 255, 1);
+.ns_table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
+
 }
 
-@media only screen and (max-width:600px) {
-    .ns_project_list_container {
-        overflow: auto;
+@media screen and (min-width: 600px) {
+    .ns_table {
+        color: #000000;
+
     }
-}
 
-/* table-satus */
-.ns_inqueue_status {
-    color: white;
-    background-color: rgba(255, 148, 50, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table thead {
+        position: static;
+        background-color: rgba(20, 27, 92, 1);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
 
-.ns_reserving_status {
-    color: white;
-    background-color: rgba(255, 79, 79, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table tbody {
+        background-color: rgba(20, 27, 92, 0.3);
 
-.ns_done-status {
-    color: white;
-    background-color: rgba(6, 209, 130, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    }
+
+    .ns_table tr {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+        padding: 12px 16px;
+        margin: 0;
+        border-radius: 0;
+        border-bottom: 1px solid rgba(20, 27, 92, 0.3);
+        background-color: transparent;
+    }
+
+    .ns_table td {
+        text-align: left;
+        display: flex;
+        align-items: start;
+        padding: 0;
+        margin: 0;
+    }
 
-.ns_inprogress_status {
-    color: white;
-    background-color: rgba(230, 208, 19, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
+    .ns_table th {
+        font-size: 16px;
+        font-weight: 300;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+    }
+
+    .ns_table td::before {
+        content: attr(none);
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    @media screen and (min-width: 990px) {
+        .ns_table {
+            padding: 0 48px;
+        }
+
+        .ns_table thead {
+            font-size: 24px;
+        }
+
+        .ns_table tr {
+            font-size: 24px;
+        }
+    }
 }

package/package.json

@@ -8,8 +8,8 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.38",
-    "author": "Amir Abolhasani",
+    "version": "1.3.40",
+    "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@types/node": "^20.12.7",
-        "@types/react": "^18.2.77",
+        "@types/react": "^18.2.78",
         "@types/react-dom": "^18.2.25",
         "antd": "^5.16.1",
         "bootstrap": "^5.3.3",

package/src/App.tsx

@@ -8,9 +8,8 @@ export function App()
         <div className="App">
             <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
                 <div>
-
                 </div>
             </NSLayoutTitle>
         </div>
     );
-}
+}   

package/src/components/NSInputEmail.tsx

@@ -69,21 +69,21 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         placeholder="Sample@gmail.com"
                     />
                 </div>
-
-                {this.state.error === true ? (
-                    <>
-                        <div className="d-flex justify-content-start align-items-center gap-2 ms-2 ">
-                            <img
-                                className={""}
-                                src={Danger}
-                                alt="icon"
-                                width={13}
-                                height={13}
-                            />
-                            <span className={Styles.ns_input_error}>Enter a valid email. </span>
-                        </div>
-                    </>) : null}
-
+                {
+                    this.state.error === true ? (
+                        <>
+                            <div className="d-flex justify-content-start align-items-center gap-2 ms-2 ">
+                                <img
+                                    className={""}
+                                    src={Danger}
+                                    alt="icon"
+                                    width={13}
+                                    height={13}
+                                />
+                                <span className={Styles.ns_input_error}>Enter a valid email.</span>
+                            </div>
+                        </>) : null
+                }
             </>
         );
     }

package/src/components/NSPanel.module.css

@@ -0,0 +1,35 @@
+.ns_panel_grid {
+    background-color: rgba(20, 27, 92, 0.3);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+margin: 0 auto;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+    }
+}
+
+.ns_panel_column {
+    background-color: rgba(20, 27, 92, 0.3);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    margin: 0 auto;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_column {
+        max-width: 700px;
+    }
+}

package/src/components/NSPanel.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Component, ReactNode } from "react";
+import Styles from './NSPanel.module.css'
+
+export interface NSSectionProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+
+export interface NSSectionState
+{}
+
+export class NSPanel extends Component<NSSectionProps, NSSectionState> {
+    constructor(props: NSSectionProps)
+    {
+        super(props);
+    }
+    override render()
+    {
+        return (
+            <section
+                className={this.props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column  } >
+                {this.props.children}
+            </section>
+        );
+    }
+}

package/src/components/NSSection.module.css

@@ -2,4 +2,10 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -8,6 +8,7 @@ export interface NSSectionProps
 {
 	children: ReactNode;
 	background?: BackgroundType;
+	center_items?: boolean;
 }
 
 export interface NSSectionState
@@ -15,7 +16,8 @@ export interface NSSectionState
 	background?: BackgroundType;
 }
 
-export class NSSection extends Component<NSSectionProps, NSSectionState> {
+export class NSSection extends Component<NSSectionProps, NSSectionState>
+{
 	constructor(props: NSSectionProps)
 	{
 		super(props);
@@ -29,6 +31,9 @@ export class NSSection extends Component<NSSectionProps, NSSectionState> {
 	}
 	override render()
 	{
+		let styles = [Styles.ns_section];
+		if (this.props.center_items)
+			styles.push(Styles.ns_section_center);
 		return (
 			<section style=
 				{{
@@ -36,7 +41,7 @@ export class NSSection extends Component<NSSectionProps, NSSectionState> {
 					backgroundColor: this.state.background?.color,
 					backgroundPosition: this.state.background?.position
 				}}
-				className={Styles.ns_section} >
+				className={styles.join(" ")} >
 				{this.props.children}
 			</section>
 		);

package/src/components/NSSpace.tsx

@@ -26,7 +26,8 @@ export interface NSSpaceState
     size: NSSpaceSizeType;
 }
 
-export class NSSpace extends React.Component<NSSpaceProps, NSSpaceState> {
+export class NSSpace extends React.Component<NSSpaceProps, NSSpaceState>
+{
     constructor(props: NSSpaceProps)
     {
         super(props);

package/src/components/NSTable.module.css

@@ -1,113 +1,105 @@
-.ns_thead th {
-    background-color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 300;
-    padding: 16px;
-    color: white;
-    font-size: 16px;
-}
+.ns_project_list_container {}
 
-.ns_tbody td {
-    background-color: rgb(173, 178, 206);
+.ns_table {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
     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);
 
 }
 
-.ns_table {
-    width: 100%;
-}
-
-.ns_project_list_container {
-    text-align: left;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-}
+.ns_table thead {
+    clip: rect(0 0 0 0);
+    position: fixed;
 
-.ns_button_group_desktop {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    gap: 48px;
-    padding: 24px 0;
 }
 
-.ns_button_group_desktop button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
+.ns_table tr {
     border-radius: 8px;
-    width: 128px;
-    height: 48px;
-    gap: 10px;
-    text-decoration: none;
-    color: black;
-    background-color: transparent;
+    padding: 16px;
+    margin: 10px;
+    display: block;
+    background-color: rgba(20, 27, 92, 0.3);
 }
 
-.ns_export_button {
-    border: 1px solid rgba(255, 148, 50, 1);
+.ns_table td {
+
+    display: block;
+    padding: 8px 0;
+    font-size: .8em;
+    text-align: right;
 }
 
-.ns_refresh_button {
-    border: 1px solid rgba(3, 119, 255, 1);
+.ns_table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
+
 }
 
-@media only screen and (max-width:600px) {
-    .ns_project_list_container {
-        overflow: auto;
+@media screen and (min-width: 600px) {
+    .ns_table {
+        color: #000000;
+
     }
-}
 
-/* table-satus */
-.ns_inqueue_status {
-    color: white;
-    background-color: rgba(255, 148, 50, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table thead {
+        position: static;
+        background-color: rgba(20, 27, 92, 1);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
 
-.ns_reserving_status {
-    color: white;
-    background-color: rgba(255, 79, 79, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table tbody {
+        background-color: rgba(20, 27, 92, 0.3);
 
-.ns_done-status {
-    color: white;
-    background-color: rgba(6, 209, 130, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    }
+
+    .ns_table tr {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+        padding: 12px 16px;
+        margin: 0;
+        border-radius: 0;
+        border-bottom: 1px solid rgba(20, 27, 92, 0.3);
+        background-color: transparent;
+    }
+
+    .ns_table td {
+        text-align: left;
+        display: flex;
+        align-items: start;
+        padding: 0;
+        margin: 0;
+    }
 
-.ns_inprogress_status {
-    color: white;
-    background-color: rgba(230, 208, 19, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
+    .ns_table th {
+        font-size: 16px;
+        font-weight: 300;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+    }
+
+    .ns_table td::before {
+        content: attr(none);
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    @media screen and (min-width: 990px) {
+        .ns_table {
+            padding: 0 48px;
+        }
+
+        .ns_table thead {
+            font-size: 24px;
+        }
+
+        .ns_table tr {
+            font-size: 24px;
+        }
+    }
 }

package/src/components/NSTable.tsx

@@ -50,7 +50,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                                 <tr key={this.props.getRowKey(row, rowIndex)}>
                                     {
                                         column_keys.map((column, columnIndex) => (
-                                            <td {...this.props.getColumnAttributes(column, columnIndex)}>
+                                            <td {...this.props.getColumnAttributes(column, columnIndex)} data-label={this.state.columns[column]}>
                                                 {this.props.getCell(row, column, rowIndex, columnIndex)}
                                             </td>
                                         ))