namirasoft-site-react 1.2.0

package/src/components/NSInputEmail.module.css

@@ -0,0 +1,38 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_error {
+    color: #FF3F3F !important;
+}
+
+.ns_input_error:focus {
+    color: #FF3F3F !important;
+}
+
+.ns_input_red {
+    border: 2px solid #FF3F3F;
+}

package/src/components/NSInputEmail.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Styles from "./NSInputEmail.module.css";
+import IconInputEmail from '../assets/images/icon-input-email.svg';
+import Danger from '../assets/images/danger.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+    error: boolean;
+}
+
+export default class NSInputEmail extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+            error: false,
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if (!email.test(e.target.value))
+        {
+            this.setState({ error: true, value: e.target.value });
+        }
+        else
+        {
+            this.setState({ error: false, value: e.target.value });
+        }
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <>
+                <div className={`${Styles.ns_input_parent} p-2`}>
+                    <span className={Styles.ns_input_title}>{this.props.title}</span>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputEmail}
+                        alt="icon"
+                        width={24}
+                        height={24}
+                    />
+                    <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"
+                    />
+                </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}
+
+            </>
+        );
+    }
+}
+
+

package/src/components/NSInputFloat.module.css

@@ -0,0 +1,23 @@
+.ns_input_parent{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+}
+.ns_input_title{
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputFloat.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputFloat.module.css";
+import IconInputFloat from '../assets/images/icon-input-float.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputFloat extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputFloat}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="number"
+                    className={Styles.ns_input}
+                    placeholder="1.2"
+                />
+
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputIP.module.css

@@ -0,0 +1,23 @@
+.ns_input_parent{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputIP.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputIP.module.css";
+import IconInputId from '../assets/images/icon-input-id.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputIP extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputId}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="number"
+                    className={Styles.ns_input}
+                    placeholder="192.158.1.38"
+                />
+
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputInteger.module.css

@@ -0,0 +1,26 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputInteger.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputInteger.module.css";
+import IconInputInteger from '../assets/images/icon-input-integer.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputInteger extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputInteger}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="number"
+                    className={Styles.ns_input}
+                    placeholder="1234"
+                />
+
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputPhone.module.css

@@ -0,0 +1,30 @@
+.ns_input_parent{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    height: 48px !important;
+    font-size: 16px !important;
+    font-weight: 400;
+    width: 310px !important;
+}
+.ns_input span{
+    color: #000 !important;
+
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+.ns_input_title{
+    color: #fff;
+    font-size: 16px;
+    font-weight: 400;
+}
+

package/src/components/NSInputPhone.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputPhone.module.css";
+import IconInputPhone from '../assets/images/icon-input-phone.svg';
+import PhoneInput from 'react-phone-input-2'
+import 'react-phone-input-2/lib/style.css'
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputPhone extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputPhone}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <PhoneInput
+                    inputClass={Styles.ns_input}
+                    country={'us'}
+                    value={this.state.value}
+                    onChange={this.setValue}
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputPrice.module.css

@@ -0,0 +1,24 @@
+.ns_input_parent{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputPrice.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Styles from "./NSInputPrice.module.css";
+import IconInputPrice from '../assets/images/icon-input-price.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputPrice extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputPrice}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="number"
+                    className={Styles.ns_input}
+                    placeholder="$1000"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputSearch.module.css

@@ -0,0 +1,24 @@
+.ns_input_form{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 47%;
+    z-index: 1;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputSearch.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import Styles from "./NSInputSearch.module.css";
+import IconInputSearch from '../assets/images/icon-input-search.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputSearch extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.keyDownEvent = this.keyDownEvent.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setValue(e);
+    }
+    keyDownEvent(event: React.KeyboardEvent<HTMLDivElement>)
+    {
+        if (event.code === "Enter")
+        {
+            //todo
+            console.log("function")
+        }
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_form} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputSearch}
+                    alt="icon"
+                    width={32}
+                    height={32}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    onKeyDown={this.keyDownEvent}
+                    type="text"
+                    className={Styles.ns_input}
+                    placeholder="Search"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputString.module.css

@@ -0,0 +1,24 @@
+.ns_input_parent{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}