namirasoft-site-react 1.3.20 → 1.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/App.js +2 -2
  2. package/dist/App.js.map +1 -1
  3. package/dist/assets/images/icon-input-copy.svg +3 -0
  4. package/dist/assets/images/icon-input-search.svg +2 -3
  5. package/dist/components/NSInputCopy.d.ts +17 -0
  6. package/dist/components/NSInputCopy.js +38 -0
  7. package/dist/components/NSInputCopy.js.map +1 -0
  8. package/dist/components/NSInputCopy.module.css +33 -0
  9. package/dist/components/NSInputSearch.d.ts +0 -1
  10. package/dist/components/NSInputSearch.js +1 -1
  11. package/dist/components/NSInputSearch.js.map +1 -1
  12. package/dist/components/NSInputSearch.module.css +2 -1
  13. package/dist/main.d.ts +1 -0
  14. package/dist/main.js +1 -0
  15. package/dist/main.js.map +1 -1
  16. package/package.json +1 -1
  17. package/src/App.tsx +4 -1
  18. package/src/assets/images/icon-input-copy.svg +3 -0
  19. package/src/assets/images/icon-input-search.svg +2 -3
  20. package/src/components/NSInputCopy.module.css +33 -0
  21. package/src/components/NSInputCopy.tsx +77 -0
  22. package/src/components/NSInputSearch.module.css +2 -1
  23. package/src/components/NSInputSearch.tsx +3 -6
  24. package/src/main.ts +1 -0
package/dist/App.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import './App.css';
3
3
  import 'bootstrap/dist/css/bootstrap.min.css';
4
- import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination } from './main';
4
+ import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination, NSInputCopy, NSInputSearch } from './main';
5
5
  export function App() {
6
- 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' })] }) }));
6
+ 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, {})] }) }));
7
7
  }
8
8
  //# sourceMappingURL=App.js.map
package/dist/App.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEvF,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,IAChF,GACd,CACT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,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"}
package/dist/assets/images/icon-input-copy.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.8297 4.99144L9.54839 0.832127C9.4396 0.726307 9.29201 0.666788 9.13806 0.666656H7.22581C6.66115 0.666656 6.11962 0.884574 5.72035 1.27247C5.32108 1.66037 5.09677 2.18647 5.09677 2.73503V3.6752H4.12903C3.56438 3.6752 3.02285 3.89312 2.62358 4.28102C2.22431 4.66891 2 5.19501 2 5.74358V13.2649C2 13.8135 2.22431 14.3396 2.62358 14.7275C3.02285 15.1154 3.56438 15.3333 4.12903 15.3333H9.54839C10.113 15.3333 10.6546 15.1154 11.0538 14.7275C11.4531 14.3396 11.6774 13.8135 11.6774 13.2649V12.3248H11.871C12.4356 12.3248 12.9771 12.1069 13.3764 11.719C13.7757 11.3311 14 10.805 14 10.2564V5.36751C13.9939 5.22581 13.9331 5.09154 13.8297 4.99144ZM9.74194 2.59213L12.0181 4.80341H9.74194V2.59213ZM10.5161 13.2649C10.5161 13.5143 10.4142 13.7534 10.2327 13.9297C10.0512 14.1061 9.80505 14.2051 9.54839 14.2051H4.12903C3.87237 14.2051 3.62622 14.1061 3.44474 13.9297C3.26325 13.7534 3.16129 13.5143 3.16129 13.2649V5.74358C3.16129 5.49423 3.26325 5.25509 3.44474 5.07878C3.62622 4.90246 3.87237 4.80341 4.12903 4.80341H5.09677V10.2564C5.09677 10.805 5.32108 11.3311 5.72035 11.719C6.11962 12.1069 6.66115 12.3248 7.22581 12.3248H10.5161V13.2649ZM11.871 11.1966H7.22581C6.96915 11.1966 6.723 11.0975 6.54151 10.9212C6.36002 10.7449 6.25806 10.5057 6.25806 10.2564V2.73503C6.25806 2.48568 6.36002 2.24655 6.54151 2.07023C6.723 1.89391 6.96915 1.79486 7.22581 1.79486H8.58065V5.36751C8.58265 5.51651 8.64447 5.65887 8.75293 5.76424C8.86139 5.86961 9.00792 5.92967 9.16129 5.93161H12.8387V10.2564C12.8387 10.5057 12.7368 10.7449 12.5553 10.9212C12.3738 11.0975 12.1276 11.1966 11.871 11.1966Z" fill="#141B5C"/>
3
+ </svg>
package/dist/assets/images/icon-input-search.svg CHANGED
@@ -1,4 +1,3 @@
1
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <circle cx="16" cy="16" r="16" fill="black" fill-opacity="0.3"/>
3
- <path d="M25.4656 24.1578L19.2822 17.9745C20.2418 16.734 20.7608 15.2173 20.7608 13.6221C20.7608 11.7126 20.0156 9.92211 18.668 8.57211C17.3203 7.22211 15.5251 6.47925 13.618 6.47925C11.7108 6.47925 9.91557 7.22449 8.56795 8.57211C7.21795 9.91972 6.4751 11.7126 6.4751 13.6221C6.4751 15.5292 7.22034 17.3245 8.56795 18.6721C9.91557 20.0221 11.7084 20.765 13.618 20.765C15.2132 20.765 16.7275 20.2459 17.968 19.2888L24.1513 25.4697C24.1694 25.4879 24.1909 25.5023 24.2146 25.5121C24.2383 25.5219 24.2637 25.527 24.2894 25.527C24.315 25.527 24.3404 25.5219 24.3641 25.5121C24.3878 25.5023 24.4093 25.4879 24.4275 25.4697L25.4656 24.434C25.4837 24.4159 25.4981 24.3944 25.5079 24.3707C25.5177 24.347 25.5228 24.3216 25.5228 24.2959C25.5228 24.2703 25.5177 24.2449 25.5079 24.2212C25.4981 24.1975 25.4837 24.176 25.4656 24.1578ZM17.3894 17.3935C16.3799 18.4007 15.0418 18.9554 13.618 18.9554C12.1941 18.9554 10.8561 18.4007 9.84653 17.3935C8.83938 16.384 8.28462 15.0459 8.28462 13.6221C8.28462 12.1983 8.83938 10.8578 9.84653 9.85068C10.8561 8.84353 12.1941 8.28877 13.618 8.28877C15.0418 8.28877 16.3822 8.84115 17.3894 9.85068C18.3965 10.8602 18.9513 12.1983 18.9513 13.6221C18.9513 15.0459 18.3965 16.3864 17.3894 17.3935Z" fill="white"/>
1
+ <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16.6666 14.6667H15.6133L15.24 14.3067C16.0732 13.3386 16.6822 12.1984 17.0234 10.9675C17.3645 9.7366 17.4294 8.44553 17.2133 7.18666C16.5866 3.48 13.4933 0.519997 9.75997 0.0666636C8.44745 -0.0993821 7.11435 0.0370258 5.86267 0.465449C4.61098 0.893872 3.47389 1.60296 2.53841 2.53844C1.60292 3.47392 0.893842 4.61101 0.465418 5.8627C0.0369953 7.11438 -0.0994126 8.44748 0.0666331 9.76C0.519966 13.4933 3.47997 16.5867 7.18663 17.2133C8.4455 17.4294 9.73657 17.3645 10.9675 17.0234C12.1983 16.6823 13.3386 16.0733 14.3066 15.24L14.6666 15.6133V16.6667L20.3333 22.3333C20.88 22.88 21.7733 22.88 22.32 22.3333C22.8666 21.7867 22.8666 20.8933 22.32 20.3467L16.6666 14.6667ZM8.66663 14.6667C5.34663 14.6667 2.66663 11.9867 2.66663 8.66666C2.66663 5.34666 5.34663 2.66666 8.66663 2.66666C11.9866 2.66666 14.6666 5.34666 14.6666 8.66666C14.6666 11.9867 11.9866 14.6667 8.66663 14.6667Z" fill="#141B5C"/>
4
3
  </svg>
package/dist/components/NSInputCopy.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ export interface NSNSInputCopyProps {
3
+ title: string;
4
+ defaultValue?: string;
5
+ onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
6
+ }
7
+ export interface NSNSInputCopyState {
8
+ value: string;
9
+ }
10
+ export declare class NSInputCopy extends React.Component<NSNSInputCopyProps, NSNSInputCopyState> {
11
+ constructor(props: NSNSInputCopyProps);
12
+ getValue(): string;
13
+ setValue(value: string): void;
14
+ private onChanged;
15
+ copyToClipboard(): void;
16
+ render(): import("react/jsx-runtime").JSX.Element;
17
+ }
package/dist/components/NSInputCopy.js ADDED
@@ -0,0 +1,38 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import React from "react";
4
+ import Styles from "./NSInputCopy.module.css";
5
+ import IconInputString from '../assets/images/icon-input-copy.svg';
6
+ export class NSInputCopy extends React.Component {
7
+ constructor(props) {
8
+ var _a;
9
+ super(props);
10
+ this.state = {
11
+ value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
12
+ };
13
+ this.getValue = this.getValue.bind(this);
14
+ this.setValue = this.setValue.bind(this);
15
+ this.onChanged = this.onChanged.bind(this);
16
+ this.copyToClipboard = this.copyToClipboard.bind(this);
17
+ }
18
+ getValue() {
19
+ return this.state.value;
20
+ }
21
+ setValue(value) {
22
+ this.setState({ value });
23
+ }
24
+ onChanged(e) {
25
+ this.setValue(e.target.value);
26
+ if (this.props.onChanged)
27
+ this.props.onChanged(e);
28
+ }
29
+ copyToClipboard() {
30
+ if (navigator.clipboard && navigator.clipboard.writeText) {
31
+ navigator.clipboard.writeText(this.getValue());
32
+ }
33
+ }
34
+ render() {
35
+ return (_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: IconInputString, alt: "icon", width: 16, height: 16, onClick: this.copyToClipboard }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: "12AB34cf" })] }));
36
+ }
37
+ }
38
+ //# sourceMappingURL=NSInputCopy.js.map
package/dist/components/NSInputCopy.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NSInputCopy.js","sourceRoot":"","sources":["../../src/components/NSInputCopy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,eAAe,MAAM,sCAAsC,CAAC;AAenE,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAiD;IAEpF,YAAY,KAAyB;;QAEjC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;SAClC,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,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,eAAe;QAEX,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS,EACxD,CAAC;YACG,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnD,CAAC;IACL,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,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,IAAI,CAAC,eAAe,GAC/B,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,UAAU,GACxB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}
package/dist/components/NSInputCopy.module.css ADDED
@@ -0,0 +1,33 @@
1
+ .ns_input_parent {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 326px;
5
+ color: #fff;
6
+ position: relative;
7
+ max-width: 100%;
8
+ }
9
+
10
+ .ns_input {
11
+ border-radius: 8px;
12
+ padding: 10px 12px;
13
+ font-size: 16px;
14
+ font-weight: 400;
15
+ background-color: #0000;
16
+ text-align: center;
17
+ border: 1px solid rgba(20, 27, 92, 1);
18
+ }
19
+
20
+ .ns_input_icon {
21
+ position: absolute;
22
+ right: 20px;
23
+ top: 67%;
24
+ z-index: 1;
25
+ }
26
+
27
+ .ns_input_title {
28
+ font-size: 24px;
29
+ font-weight: 700;
30
+ color:rgba(20, 27, 92, 1);
31
+ text-align: center;
32
+ margin-bottom: 16px;
33
+ }
package/dist/components/NSInputSearch.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from "react";
2
2
  export interface NSInputSearchProps {
3
- title: string;
4
3
  }
5
4
  export interface NSInputSearchState {
6
5
  value: string;
package/dist/components/NSInputSearch.js CHANGED
@@ -32,7 +32,7 @@ export class NSInputSearch extends React.Component {
32
32
  }
33
33
  }
34
34
  render() {
35
- return (_jsxs("div", { className: `${Styles.ns_input_form} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputSearch, alt: "icon", width: 32, height: 32 }), _jsx("input", { value: this.state.value, onChange: this.setValue, onKeyDown: this.keyDownEvent, type: "text", className: Styles.ns_input, placeholder: "Search" })] }));
35
+ return (_jsxs("div", { className: `${Styles.ns_input_form} p-2`, children: [_jsx("img", { className: Styles.ns_input_icon, src: IconInputSearch, alt: "icon", width: 22, height: 22 }), _jsx("input", { value: this.state.value, onChange: this.setValue, onKeyDown: this.keyDownEvent, type: "text", className: Styles.ns_input, placeholder: "Search" })] }));
36
36
  }
37
37
  }
38
38
  //# sourceMappingURL=NSInputSearch.js.map
package/dist/components/NSInputSearch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSInputSearch.js","sourceRoot":"","sources":["../../src/components/NSInputSearch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAYrE,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAiD;IACtF,YAAY,KAAyB;QAEjC,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;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;QACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IACD,QAAQ,CAAC,CAAsC;QAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7C,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;IACD,SAAS,CAAC,CAAsC;QAE5C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IACD,YAAY,CAAC,KAA0C;QAEnD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAC1B,CAAC;YAEG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;QAC3B,CAAC;IACL,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,MAAM,aACzC,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,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,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,QAAQ,GACtB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}
1
+ {"version":3,"file":"NSInputSearch.js","sourceRoot":"","sources":["../../src/components/NSInputSearch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAUrE,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAiD;IACtF,YAAY,KAAyB;QAEjC,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;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;QACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IACD,QAAQ,CAAC,CAAsC;QAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7C,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;IACD,SAAS,CAAC,CAAsC;QAE5C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IACD,YAAY,CAAC,KAA0C;QAEnD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAC1B,CAAC;YAEG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;QAC3B,CAAC;IACL,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,MAAM,aACzC,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,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,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,QAAQ,GACtB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}
package/dist/components/NSInputSearch.module.css CHANGED
@@ -12,12 +12,13 @@
12
12
  padding: 10px 12px;
13
13
  font-size: 16px;
14
14
  font-weight: 400;
15
+ border: 1px solid rgba(47, 0, 236, 0.6);
15
16
  }
16
17
 
17
18
  .ns_input_icon {
18
19
  position: absolute;
19
20
  right: 20px;
20
- top: 45%;
21
+ top: 26%;
21
22
  }
22
23
 
23
24
  .ns_input_title {
package/dist/main.d.ts CHANGED
@@ -7,6 +7,7 @@ export * from "./components/NSEntityCardBackground";
7
7
  export * from "./components/NSEntityBar";
8
8
  export * from "./components/NSFooter";
9
9
  export * from "./components/NSHeader";
10
+ export * from "./components/NSInputCopy";
10
11
  export * from "./components/NSInputDate";
11
12
  export * from "./components/NSInputDuration";
12
13
  export * from "./components/NSInputEmail";
package/dist/main.js CHANGED
@@ -7,6 +7,7 @@ export * from "./components/NSEntityCardBackground";
7
7
  export * from "./components/NSEntityBar";
8
8
  export * from "./components/NSFooter";
9
9
  export * from "./components/NSHeader";
10
+ export * from "./components/NSInputCopy";
10
11
  export * from "./components/NSInputDate";
11
12
  export * from "./components/NSInputDuration";
12
13
  export * from "./components/NSInputEmail";
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,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,0BAA0B,CAAC;AACzC,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"}
1
+ {"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,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,0BAA0B,CAAC;AACzC,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"}
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.20",
11
+ "version": "1.3.22",
12
12
  "author": "Amir Abolhasani",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
package/src/App.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import './App.css';
2
2
  import 'bootstrap/dist/css/bootstrap.min.css';
3
- import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination } from './main';
3
+ import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination, NSInputCopy, NSInputSearch } from './main';
4
4
 
5
5
  export function App()
6
6
  {
@@ -10,6 +10,9 @@ export function App()
10
10
  <NSPagination page={1} size={25} />
11
11
  <NSButtonBlue title='Apply' onClick={() => ""} />
12
12
  <NSButtonBlueVector title='New' onClick={() => ""} vector='/assets/images/add-vector.png' />
13
+ <NSInputCopy title="Your Token" />
14
+ <NSInputSearch />
15
+
13
16
  </NSLayoutTitle>
14
17
  </div>
15
18
  );
package/src/assets/images/icon-input-copy.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.8297 4.99144L9.54839 0.832127C9.4396 0.726307 9.29201 0.666788 9.13806 0.666656H7.22581C6.66115 0.666656 6.11962 0.884574 5.72035 1.27247C5.32108 1.66037 5.09677 2.18647 5.09677 2.73503V3.6752H4.12903C3.56438 3.6752 3.02285 3.89312 2.62358 4.28102C2.22431 4.66891 2 5.19501 2 5.74358V13.2649C2 13.8135 2.22431 14.3396 2.62358 14.7275C3.02285 15.1154 3.56438 15.3333 4.12903 15.3333H9.54839C10.113 15.3333 10.6546 15.1154 11.0538 14.7275C11.4531 14.3396 11.6774 13.8135 11.6774 13.2649V12.3248H11.871C12.4356 12.3248 12.9771 12.1069 13.3764 11.719C13.7757 11.3311 14 10.805 14 10.2564V5.36751C13.9939 5.22581 13.9331 5.09154 13.8297 4.99144ZM9.74194 2.59213L12.0181 4.80341H9.74194V2.59213ZM10.5161 13.2649C10.5161 13.5143 10.4142 13.7534 10.2327 13.9297C10.0512 14.1061 9.80505 14.2051 9.54839 14.2051H4.12903C3.87237 14.2051 3.62622 14.1061 3.44474 13.9297C3.26325 13.7534 3.16129 13.5143 3.16129 13.2649V5.74358C3.16129 5.49423 3.26325 5.25509 3.44474 5.07878C3.62622 4.90246 3.87237 4.80341 4.12903 4.80341H5.09677V10.2564C5.09677 10.805 5.32108 11.3311 5.72035 11.719C6.11962 12.1069 6.66115 12.3248 7.22581 12.3248H10.5161V13.2649ZM11.871 11.1966H7.22581C6.96915 11.1966 6.723 11.0975 6.54151 10.9212C6.36002 10.7449 6.25806 10.5057 6.25806 10.2564V2.73503C6.25806 2.48568 6.36002 2.24655 6.54151 2.07023C6.723 1.89391 6.96915 1.79486 7.22581 1.79486H8.58065V5.36751C8.58265 5.51651 8.64447 5.65887 8.75293 5.76424C8.86139 5.86961 9.00792 5.92967 9.16129 5.93161H12.8387V10.2564C12.8387 10.5057 12.7368 10.7449 12.5553 10.9212C12.3738 11.0975 12.1276 11.1966 11.871 11.1966Z" fill="#141B5C"/>
3
+ </svg>
package/src/assets/images/icon-input-search.svg CHANGED
@@ -1,4 +1,3 @@
1
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <circle cx="16" cy="16" r="16" fill="black" fill-opacity="0.3"/>
3
- <path d="M25.4656 24.1578L19.2822 17.9745C20.2418 16.734 20.7608 15.2173 20.7608 13.6221C20.7608 11.7126 20.0156 9.92211 18.668 8.57211C17.3203 7.22211 15.5251 6.47925 13.618 6.47925C11.7108 6.47925 9.91557 7.22449 8.56795 8.57211C7.21795 9.91972 6.4751 11.7126 6.4751 13.6221C6.4751 15.5292 7.22034 17.3245 8.56795 18.6721C9.91557 20.0221 11.7084 20.765 13.618 20.765C15.2132 20.765 16.7275 20.2459 17.968 19.2888L24.1513 25.4697C24.1694 25.4879 24.1909 25.5023 24.2146 25.5121C24.2383 25.5219 24.2637 25.527 24.2894 25.527C24.315 25.527 24.3404 25.5219 24.3641 25.5121C24.3878 25.5023 24.4093 25.4879 24.4275 25.4697L25.4656 24.434C25.4837 24.4159 25.4981 24.3944 25.5079 24.3707C25.5177 24.347 25.5228 24.3216 25.5228 24.2959C25.5228 24.2703 25.5177 24.2449 25.5079 24.2212C25.4981 24.1975 25.4837 24.176 25.4656 24.1578ZM17.3894 17.3935C16.3799 18.4007 15.0418 18.9554 13.618 18.9554C12.1941 18.9554 10.8561 18.4007 9.84653 17.3935C8.83938 16.384 8.28462 15.0459 8.28462 13.6221C8.28462 12.1983 8.83938 10.8578 9.84653 9.85068C10.8561 8.84353 12.1941 8.28877 13.618 8.28877C15.0418 8.28877 16.3822 8.84115 17.3894 9.85068C18.3965 10.8602 18.9513 12.1983 18.9513 13.6221C18.9513 15.0459 18.3965 16.3864 17.3894 17.3935Z" fill="white"/>
1
+ <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16.6666 14.6667H15.6133L15.24 14.3067C16.0732 13.3386 16.6822 12.1984 17.0234 10.9675C17.3645 9.7366 17.4294 8.44553 17.2133 7.18666C16.5866 3.48 13.4933 0.519997 9.75997 0.0666636C8.44745 -0.0993821 7.11435 0.0370258 5.86267 0.465449C4.61098 0.893872 3.47389 1.60296 2.53841 2.53844C1.60292 3.47392 0.893842 4.61101 0.465418 5.8627C0.0369953 7.11438 -0.0994126 8.44748 0.0666331 9.76C0.519966 13.4933 3.47997 16.5867 7.18663 17.2133C8.4455 17.4294 9.73657 17.3645 10.9675 17.0234C12.1983 16.6823 13.3386 16.0733 14.3066 15.24L14.6666 15.6133V16.6667L20.3333 22.3333C20.88 22.88 21.7733 22.88 22.32 22.3333C22.8666 21.7867 22.8666 20.8933 22.32 20.3467L16.6666 14.6667ZM8.66663 14.6667C5.34663 14.6667 2.66663 11.9867 2.66663 8.66666C2.66663 5.34666 5.34663 2.66666 8.66663 2.66666C11.9866 2.66666 14.6666 5.34666 14.6666 8.66666C14.6666 11.9867 11.9866 14.6667 8.66663 14.6667Z" fill="#141B5C"/>
4
3
  </svg>
package/src/components/NSInputCopy.module.css ADDED
@@ -0,0 +1,33 @@
1
+ .ns_input_parent {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 326px;
5
+ color: #fff;
6
+ position: relative;
7
+ max-width: 100%;
8
+ }
9
+
10
+ .ns_input {
11
+ border-radius: 8px;
12
+ padding: 10px 12px;
13
+ font-size: 16px;
14
+ font-weight: 400;
15
+ background-color: #0000;
16
+ text-align: center;
17
+ border: 1px solid rgba(20, 27, 92, 1);
18
+ }
19
+
20
+ .ns_input_icon {
21
+ position: absolute;
22
+ right: 20px;
23
+ top: 67%;
24
+ z-index: 1;
25
+ }
26
+
27
+ .ns_input_title {
28
+ font-size: 24px;
29
+ font-weight: 700;
30
+ color:rgba(20, 27, 92, 1);
31
+ text-align: center;
32
+ margin-bottom: 16px;
33
+ }
package/src/components/NSInputCopy.tsx ADDED
@@ -0,0 +1,77 @@
1
+ "use client";
2
+
3
+ import React from "react";
4
+ import Styles from "./NSInputCopy.module.css";
5
+ import IconInputString from '../assets/images/icon-input-copy.svg';
6
+
7
+
8
+ export interface NSNSInputCopyProps
9
+ {
10
+ title: string;
11
+ defaultValue?: string;
12
+ onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
13
+ }
14
+
15
+ export interface NSNSInputCopyState
16
+ {
17
+ value: string;
18
+ }
19
+
20
+ export class NSInputCopy extends React.Component<NSNSInputCopyProps, NSNSInputCopyState>
21
+ {
22
+ constructor(props: NSNSInputCopyProps)
23
+ {
24
+ super(props);
25
+ this.state = {
26
+ value: props.defaultValue ?? "",
27
+ };
28
+ this.getValue = this.getValue.bind(this);
29
+ this.setValue = this.setValue.bind(this);
30
+ this.onChanged = this.onChanged.bind(this);
31
+ this.copyToClipboard = this.copyToClipboard.bind(this);
32
+ }
33
+ getValue(): string
34
+ {
35
+ return this.state.value;
36
+ }
37
+ setValue(value: string): void
38
+ {
39
+ this.setState({ value });
40
+ }
41
+ private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
42
+ {
43
+ this.setValue(e.target.value);
44
+ if (this.props.onChanged)
45
+ this.props.onChanged(e);
46
+ }
47
+ copyToClipboard(): void
48
+ {
49
+ if (navigator.clipboard && navigator.clipboard.writeText)
50
+ {
51
+ navigator.clipboard.writeText(this.getValue());
52
+ }
53
+ }
54
+ override render()
55
+ {
56
+ return (
57
+ <div className={`${Styles.ns_input_parent} p-2`}>
58
+ <span className={Styles.ns_input_title}>{this.props.title}</span>
59
+ <img
60
+ className={Styles.ns_input_icon}
61
+ src={IconInputString}
62
+ alt="icon"
63
+ width={16}
64
+ height={16}
65
+ onClick={this.copyToClipboard}
66
+ />
67
+ <input
68
+ value={this.state.value}
69
+ onChange={this.onChanged}
70
+ type="text"
71
+ className={Styles.ns_input}
72
+ placeholder="12AB34cf"
73
+ />
74
+ </div>
75
+ );
76
+ }
77
+ }
package/src/components/NSInputSearch.module.css CHANGED
@@ -12,12 +12,13 @@
12
12
  padding: 10px 12px;
13
13
  font-size: 16px;
14
14
  font-weight: 400;
15
+ border: 1px solid rgba(47, 0, 236, 0.6);
15
16
  }
16
17
 
17
18
  .ns_input_icon {
18
19
  position: absolute;
19
20
  right: 20px;
20
- top: 45%;
21
+ top: 26%;
21
22
  }
22
23
 
23
24
  .ns_input_title {
package/src/components/NSInputSearch.tsx CHANGED
@@ -5,9 +5,7 @@ import Styles from "./NSInputSearch.module.css";
5
5
  import IconInputSearch from '../assets/images/icon-input-search.svg';
6
6
 
7
7
  export interface NSInputSearchProps
8
- {
9
- title: string;
10
- }
8
+ {}
11
9
 
12
10
  export interface NSInputSearchState
13
11
  {
@@ -54,13 +52,12 @@ export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSe
54
52
  {
55
53
  return (
56
54
  <div className={`${Styles.ns_input_form} p-2`}>
57
- <span className={Styles.ns_input_title}>{this.props.title}</span>
58
55
  <img
59
56
  className={Styles.ns_input_icon}
60
57
  src={IconInputSearch}
61
58
  alt="icon"
62
- width={32}
63
- height={32}
59
+ width={22}
60
+ height={22}
64
61
  />
65
62
  <input
66
63
  value={this.state.value}
package/src/main.ts CHANGED
@@ -7,6 +7,7 @@ export * from "./components/NSEntityCardBackground";
7
7
  export * from "./components/NSEntityBar";
8
8
  export * from "./components/NSFooter";
9
9
  export * from "./components/NSHeader";
10
+ export * from "./components/NSInputCopy";
10
11
  export * from "./components/NSInputDate";
11
12
  export * from "./components/NSInputDuration";
12
13
  export * from "./components/NSInputEmail";