namirasoft-site-react 1.2.46 → 1.2.47

package/dist/App.js

@@ -3,7 +3,8 @@ import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { NSButtonRed } from './components/NSButtonRed';
 import { NSLayout, NSPagination } from './main';
+import { NSBoxSection } from './components/NSBoxSection';
 export function App() {
-    return (_jsx("div", Object.assign({ className: "App" }, { children: _jsxs(NSLayout, Object.assign({ scope: 'Namirasoft SOP console', logo: '' }, { children: [_jsxs("div", Object.assign({ className: 'my-4 container' }, { children: [_jsx(NSButtonRed, { title: 'Delete', onClick: () => { } }), _jsx(NSPagination, { page: 1, size: 25 })] })), "asdasd"] })) })));
+    return (_jsx("div", Object.assign({ className: "App" }, { children: _jsxs(NSLayout, Object.assign({ scope: 'Namirasoft SOP console', logo: '' }, { children: [_jsxs("div", Object.assign({ className: 'my-4 container' }, { children: [_jsx(NSBoxSection, { image: 'src/assets/images/position-down-vector.png', description: "", detail: '#' }), _jsx(NSButtonRed, { title: 'Delete', onClick: () => { } }), _jsx(NSPagination, { page: 1, size: 25 })] })), "asdasd"] })) })));
 }
 //# 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,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,UAAU,GAAG;IAyBf,OAAO,CACH,4BAAK,SAAS,EAAC,KAAK,gBAChB,MAAC,QAAQ,kBAAC,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,EAAE,iBAC5C,6BAAK,SAAS,EAAC,gBAAgB,iBAe3B,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAI,EAClD,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,KACjC,eAEC,IACT,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,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,MAAM,UAAU,GAAG;IAyBf,OAAO,CACH,4BAAK,SAAS,EAAC,KAAK,gBAChB,MAAC,QAAQ,kBAAC,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,EAAE,iBAC5C,6BAAK,SAAS,EAAC,gBAAgB,iBAC3B,KAAC,YAAY,IAAC,KAAK,EAAC,4CAA4C,EAAC,WAAW,EAAC,EAAE,EAAC,MAAM,EAAC,GAAG,GAAG,EAe7F,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAI,EAClD,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,KACjC,eAEC,IACT,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSBoxSection.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface IProps {
+    detail: string;
+    image: string;
+    description: string;
+}
+interface IState {
+    detail: string;
+    image: string;
+    description: string;
+}
+export declare class NSBoxSection extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    setTitle(description: string): void;
+    setHRef(detail: string): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NSBoxSection.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Style from "./NSBoxSection.module.css";
+import React from "react";
+export class NSBoxSection extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { detail: props.detail, image: props.image, description: props.description };
+    }
+    setTitle(description) {
+        this.setState({ description });
+    }
+    setHRef(detail) {
+        this.setState({ detail });
+    }
+    render() {
+        return (_jsxs("div", Object.assign({ className: Style.position__layout }, { children: [_jsx("img", { className: "rounded", src: this.state.image, alt: "wordpress", width: 326, height: 220 }), _jsx("h3", { children: this.state.description }), _jsxs("h4", { children: [this.state.detail, _jsx("img", { className: "mx-2", src: '/assets/images/position-down-vector.png', width: 16, height: 16 })] })] })));
+    }
+}
+//# sourceMappingURL=NSBoxSection.js.map

package/dist/components/NSBoxSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSBoxSection.js","sourceRoot":"","sources":["../../src/components/NSBoxSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAyB;IAE7D,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IAC9F,CAAC;IACD,QAAQ,CAAC,WAAmB;QAExB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,CAAC,MAAc;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,6BAAK,SAAS,EAAE,KAAK,CAAC,gBAAgB,iBAClC,cAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAQ,EAC/F,uBAAK,IAAI,CAAC,KAAK,CAAC,WAAW,GAAM,EACjC,yBAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAC,cAAK,SAAS,EAAC,MAAM,EAAC,GAAG,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAQ,IAAK,KAC1H,CACV,CAAA;IACL,CAAC;CACJ"}

package/dist/components/NSBoxSection.module.css

@@ -0,0 +1,26 @@
+.position__layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(20, 27, 92, 0.3);
+    width: 358px;
+    height: 349px;
+    border-radius: 8px;
+    text-align: center;
+    gap: 16px;
+    margin: 12px 0;
+}
+
+.position__layout h3 {
+    color: rgba(20, 27, 92, 1);
+    font-weight: 700;
+    font-size: 24px;
+}
+
+.position__layout h4 {
+    color: rgba(20, 27, 92, 1);
+    font-weight: 300;
+    font-size: 16px;
+    color: rgba(20, 27, 92, 1)
+}

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "namirasoft-site-react",
-    "version": "1.2.46",
+    "version": "1.2.47",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",
     "dependencies": {
-        "@types/node": "^20.11.20",
-        "@types/react": "^18.2.59",
+        "@types/node": "^20.11.24",
+        "@types/react": "^18.2.61",
         "@types/react-dom": "^18.2.19",
-        "antd": "^5.14.2",
+        "antd": "^5.15.0",
         "bootstrap": "^5.3.3",
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.2.3",
@@ -19,7 +19,7 @@
         "react-dom": "^18.2.0",
         "react-phone-input-2": "^2.15.1",
         "react-phone-number-input": "^3.3.9",
-        "react-router-dom": "^6.22.1",
+        "react-router-dom": "^6.22.2",
         "react-scripts": "5.0.1"
     },
     "scripts": {

package/src/App.tsx

@@ -17,6 +17,7 @@ import { NSButtonRed } from './components/NSButtonRed';
 // import { NSSelectBox } from './components/NSSelectBox';
 // import { type SelectProps } from 'antd';
 import { NSLayout, NSPagination } from './main';
+import { NSBoxSection } from './components/NSBoxSection';
 
 export function App()
 {
@@ -47,6 +48,7 @@ export function App()
         <div className="App">
             <NSLayout scope='Namirasoft SOP console' logo=''>
                 <div className='my-4 container'>
+                    <NSBoxSection image='src/assets/images/position-down-vector.png' description="" detail='#' />
                     {/* <NSInputText title='Text' />
                     <NSInputInteger title='Integer' />
                     <NSInputFloat title='Floating Point' />

package/src/components/NSBoxSection.module.css

@@ -0,0 +1,26 @@
+.position__layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(20, 27, 92, 0.3);
+    width: 358px;
+    height: 349px;
+    border-radius: 8px;
+    text-align: center;
+    gap: 16px;
+    margin: 12px 0;
+}
+
+.position__layout h3 {
+    color: rgba(20, 27, 92, 1);
+    font-weight: 700;
+    font-size: 24px;
+}
+
+.position__layout h4 {
+    color: rgba(20, 27, 92, 1);
+    font-weight: 300;
+    font-size: 16px;
+    color: rgba(20, 27, 92, 1)
+}

package/src/components/NSBoxSection.tsx

@@ -0,0 +1,44 @@
+"use client";
+import Style from "./NSBoxSection.module.css";
+import React from "react";
+
+interface IProps
+{
+    detail: string;
+    image: string;
+    description: string;
+}
+
+interface IState
+{
+    detail: string;
+    image: string;
+    description: string;
+}
+
+export class NSBoxSection extends React.Component<IProps, IState>
+{
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = { detail: props.detail, image: props.image, description: props.description };
+    }
+    setTitle(description: string)
+    {
+        this.setState({ description });
+    }
+    setHRef(detail: string)
+    {
+        this.setState({ detail });
+    }
+    override render()
+    {
+        return (
+            <div className={Style.position__layout}>
+                <img className="rounded" src={this.state.image} alt="wordpress" width={326} height={220}></img>
+                <h3>{this.state.description}</h3>
+                <h4>{this.state.detail}<img className="mx-2" src='/assets/images/position-down-vector.png' width={16} height={16}></img></h4>
+            </div >
+        )
+    }
+}