namirasoft-site-react 1.3.62 → 1.3.64

package/src/components/NSLinkGreen.tsx

@@ -1,45 +1,6 @@
-"use client";
+import { NSLink, NSLinkProps } from "./NSLink";
 
-import Style from "./NSLinkGreen.module.css";
-import React from "react";
-import { Link } from "react-router-dom";
-import { BaseComponentProps } from "../props/BaseComponentProps";
-
-export interface NSLinkGreenProps extends BaseComponentProps
-{
-    title: string;
-    href: string;
-}
-
-export interface NSLinkGreenState
-{
-    title: string;
-    href: string;
-}
-
-export class NSLinkGreen extends React.Component<NSLinkGreenProps, NSLinkGreenState>
+export function NSLinkGreen(props: NSLinkProps)
 {
-    constructor(props: NSLinkGreenProps)
-    {
-        super(props);
-        this.state = { title: props.title, href: props.href };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    setHRef(href: string)
-    {
-        this.setState({ href });
-    }
-    override render()
-    {
-        return (
-            <Link className="text-white text-decoration-none" to={this.state.href}>
-                <div className={Style.ns_link_green}>
-                    {this.state.title}
-                </div>
-            </Link>
-        )
-    }
+    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "#06D182" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSLinkRed.tsx

@@ -1,45 +1,6 @@
-"use client";
+import { NSLink, NSLinkProps } from "./NSLink";
 
-import Style from "./NSLinkRed.module.css";
-import React from "react";
-import { Link } from "react-router-dom";
-import { BaseComponentProps } from "../props/BaseComponentProps";
-
-export interface NSLinkRedProps extends BaseComponentProps
-{
-    title: string;
-    href: string;
-}
-
-export interface NSLinkRedState
-{
-    title: string;
-    href: string;
-}
-
-export class NSLinkRed extends React.Component<NSLinkRedProps, NSLinkRedState>
+export function NSLinkRed(props: NSLinkProps)
 {
-    constructor(props: NSLinkRedProps)
-    {
-        super(props);
-        this.state = { title: props.title, href: props.href };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    setHRef(href: string)
-    {
-        this.setState({ href });
-    }
-    override render()
-    {
-        return (
-            <Link className="text-white text-decoration-none" to={this.state.href}>
-                <div className={Style.ns_link_red}>
-                    {this.state.title}
-                </div>
-            </Link>
-        )
-    }
+    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "rgb(265, 63, 63, 1)" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSNotification.tsx

@@ -1,22 +1,16 @@
-"use client";
-
-import React from "react";
 import Exit from '../assets/images/close-vector.png';
 import Styles from "./NSNotification.module.css";
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSNotificationProps extends BaseComponentProps
 {
-    title: string;
-    type: NSNotificationType;
-}
-
-export interface NSNotificationState
-{
-    show: boolean;
+    text: string;
+    type: NotificationType;
+    color: NSNotificationColor;
+    onClose: () => void;
 }
 
-export enum NSNotificationType
+export enum NSNotificationColor
 {
     GRAY = "GRAY",
     BLUE = "BLUE",
@@ -25,48 +19,31 @@ export enum NSNotificationType
     RED = "RED",
 }
 
-export class NSNotification extends React.Component<NSNotificationProps, NSNotificationState>
+export enum NotificationType
 {
-    constructor(props: NSNotificationProps)
-    {
-        super(props);
-        this.state = {
-            show: true,
-        };
-    }
-
-    override componentDidMount(): void
-    {
-        setTimeout(() => { this.handleDestroy() }, 8000);
-    }
-
-    handleDestroy = () =>
-    {
-        this.setState({ show: false });
-    };
+    Information = "Information",
+    Warning = "Warning",
+    Success = "Success",
+    Error = "Error",
+}
 
-    override render()
-    {
-        let className = Styles["ns_" + this.props.type.toString().toLowerCase];
-        return <>
-            {
-                this.state.show && (
-                    <div id={this.props.id}
-                        className={`${Styles.ns_messenger} ${className}`}
-                        style={this.props.style}
-                    >
-                        <p className={`mb-0 ns-font-16-normal`}>{this.props.title}</p>
-                        <img
-                            className={Styles.ns_exit_icon}
-                            src={Exit}
-                            alt="exit"
-                            width={32}
-                            height={32}
-                            onClick={() => this.handleDestroy()}
-                        />
-                    </div>
-                )
-            }
-        </>
-    }
+export function NSNotification(props: NSNotificationProps)
+{
+    let className = Styles["ns_" + props.color.toString().toLowerCase];
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_messenger} ${className}`}
+            style={props.style}
+        >
+            <p className={`mb-0 ns-font-16-normal`}>{props.text}</p>
+            <img
+                className={Styles.ns_exit_icon}
+                src={Exit}
+                alt="exit"
+                width={32}
+                height={32}
+                onClick={props.onClose}
+            />
+        </div>
+    );
 }

package/src/components/NSPagination.tsx

@@ -1,8 +1,5 @@
-"use client";
-
 import { BaseComponentProps } from '../props/BaseComponentProps';
 import Styles from './NSPagination.module.css';
-import { Component } from 'react';
 
 export interface NSPaginationProps extends BaseComponentProps
 {
@@ -10,88 +7,75 @@ export interface NSPaginationProps extends BaseComponentProps
     page: number;
 }
 
-export interface NSPaginationState
-{
-    size: number;
-    page: number;
-}
-export class NSPagination extends Component<NSPaginationProps, NSPaginationState>
+export function NSPagination(props: NSPaginationProps)
 {
-    constructor(props: NSPaginationProps)
-    {
-        super(props);
-        this.state = { size: props.size, page: props.page }
-    }
-    override render()
+    let page = props.page;
+    let size = props.size;
+    let window = 2;
+    let min = Math.max(2, page - window);
+    let max = Math.min(page + window, size - 1);
+    let arr = [];
+    let pushPage = (index: number) =>
     {
-        let page = this.props.page;
-        let size = this.props.size;
-        let window = 2;
-        let min = Math.max(2, page - window);
-        let max = Math.min(page + window, size - 1);
-        let arr = [];
-        let pushPage = (index: number) =>
-        {
-            if (index == page)
-                arr.push(
-                    <div className={`${Styles.ns_select_number_parent}`}>
-                        <a href='#' className={`${Styles.ns_paginate_link} ${Styles.ns_select_number}`}>{index}</a>
-                    </div>
-                );
-            else
-                arr.push(
-                    <div>
-                        <a href='#' className={`${Styles.ns_paginate_link}`}>{index}</a>
-                    </div>
-                );
-        };
-        arr.push(
-            <div>
-                <a href='#'>
-                    <img
-                        src='https://static.namirasoft.com/icons/base/circle-chevron-left.png'
-                        alt='left_vector'
-                        width={32}
-                        height={32}
-                    />
-                </a>
-            </div>
-        );
-        pushPage(1);
-        if (page > window * 2)
+        if (index == page)
             arr.push(
-                <div>
-                    <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
+                <div className={`${Styles.ns_select_number_parent}`}>
+                    <a href='#' className={`${Styles.ns_paginate_link} ${Styles.ns_select_number}`}>{index}</a>
                 </div>
             );
-        for (let i = min; i <= max; i++)
-            pushPage(i);
-        if (page <= size - window * 2)
+        else
             arr.push(
                 <div>
-                    <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
+                    <a href='#' className={`${Styles.ns_paginate_link}`}>{index}</a>
                 </div>
             );
-        pushPage(size);
+    };
+    arr.push(
+        <div>
+            <a href='#'>
+                <img
+                    src='https://static.namirasoft.com/icons/base/circle-chevron-left.png'
+                    alt='left_vector'
+                    width={32}
+                    height={32}
+                />
+            </a>
+        </div>
+    );
+    pushPage(1);
+    if (page > window * 2)
         arr.push(
             <div>
-                <a href='#'>
-                    <img
-                        src='https://static.namirasoft.com/icons/base/circle-chevron-right.png'
-                        width={32}
-                        height={32}
-                        alt='right_vector'
-                    />
-                </a>
+                <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
             </div>
         );
-
-        return (
-            <div id={this.props.id}
-                className={`${Styles.ns_pagination_container} ${this.props.classList?.join(" ")}`}
-                style={this.props.style}>
-                {arr.map(x => (x))}
+    for (let i = min; i <= max; i++)
+        pushPage(i);
+    if (page <= size - window * 2)
+        arr.push(
+            <div>
+                <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
             </div>
         );
-    }
+    pushPage(size);
+    arr.push(
+        <div>
+            <a href='#'>
+                <img
+                    src='https://static.namirasoft.com/icons/base/circle-chevron-right.png'
+                    width={32}
+                    height={32}
+                    alt='right_vector'
+                />
+            </a>
+        </div>
+    );
+
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_pagination_container} ${props.classList?.join(" ")}`}
+            style={props.style}>
+            {arr.map(x => (x))}
+        </div>
+    );
 }

package/src/components/NSSelectBox.module.css

@@ -1,11 +1,11 @@
 .ns_input_parent {
-    width: 326px;
+    width: 272px;
     max-width: 100%;
 }
 
 .ns_input_select {
-    height: 45px;
-    width: 304px !important;
+    height: 48px;
+    width: 272px !important;
 }
 
 .ns_input_select span span svg path {

package/src/pages/NSLoginPage.tsx

@@ -1,4 +1,3 @@
-import { Component } from 'react';
 import Styles from './NSLoginPage.module.css'
 import { NSButtonGreen } from '../components/NSButtonGreen';
 import { NSLinkBlue } from '../components/NSLinkBlue';
@@ -13,29 +12,26 @@ export interface NSLoginPageProps
     onClick?: () => void;
 }
 
-export class NSLoginPage extends Component<NSLoginPageProps>
+export function NSLoginPage(props: NSLoginPageProps)
 {
-    override render()
-    {
-        let button = <></>;
-        if (this.props.href)
-            button = <NSLinkBlue title="Login" href={this.props.href ?? ""} />;
-        else if (this.props.onClick)
-            button = <NSButtonGreen title="Login" onClick={this.props.onClick} />;
-        return (
-            <div style={{ backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }}>
-                <div className={`${Styles.ns_login_container}`} style={{ marginTop: "100px" }}>
-                    <div className={`${Styles.ns_logo}`}>
-                        <img width={256} height={256} src={this.props.logo} alt={`${this.props.title} Logo`}></img>
-                    </div>
-                    <NSSpace size={NSSpaceSizeType.SMALL} />
-                    <div><h1 className={`${Styles.ns_title}`}>{this.props.title}</h1></div>
-                    <NSSpace size={NSSpaceSizeType.SMALL} />
-                    <div className={`${Styles.ns_button}`}>
-                        {button}
-                    </div>
+    let button = <></>;
+    if (props.href)
+        button = <NSLinkBlue title="Login" href={props.href ?? ""} />;
+    else if (props.onClick)
+        button = <NSButtonGreen title="Login" onClick={props.onClick} />;
+    return (
+        <div style={{ backgroundImage: props.background, width: "100%", backgroundSize: "cover" }}>
+            <div className={`${Styles.ns_login_container}`} style={{ marginTop: "100px" }}>
+                <div className={`${Styles.ns_logo}`}>
+                    <img width={256} height={256} src={props.logo} alt={`${props.title} Logo`}></img>
                 </div>
-            </div >
-        );
-    }
+                <NSSpace size={NSSpaceSizeType.SMALL} />
+                <div><h1 className={`${Styles.ns_title}`}>{props.title}</h1></div>
+                <NSSpace size={NSSpaceSizeType.SMALL} />
+                <div className={`${Styles.ns_button}`}>
+                    {button}
+                </div>
+            </div>
+        </div >
+    );
 }

package/src/pages/NSNotFoundPage.tsx

@@ -1,18 +1,12 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSNotFoundPage.module.css'
 import { NSLinkBlue } from '../main';
 
-export class NSNotFoundPage extends Component
+export function NSNotFoundPage()
 {
-	override render()
-	{
-		return (
-			<>
-				<div className={Styles.ns_not_found_page}></div>
-				<NSLinkBlue href='/' target='_self' title='Back To Home'/>``
-			</>
-		);
-	}
+	return (
+		<>
+			<div className={Styles.ns_not_found_page}></div>
+			<NSLinkBlue href='/' target='_self' title='Back To Home' />``
+		</>
+	);
 }

package/dist/components/NSLinkGreen.module.css

@@ -1,16 +0,0 @@
-.ns_link_green {
-    display: flex;
-    border-radius: 8px;
-    background-color: #06D182;
-    color: #ffffff;
-    border: 0;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    text-decoration: none;
-    width: 358px;
-    height: 48px;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    font-weight: 400;
-}

package/dist/components/NSLinkRed.module.css

@@ -1,16 +0,0 @@
-.ns_link_red {
-    display: flex;
-    border-radius: 8px;
-    background-color: rgb(265, 63, 63, 1);
-    color: #ffffff;
-    border: 0;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    text-decoration: none;
-    width: 358px;
-    height: 48px;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    font-weight: 400;
-}

package/src/components/NSLinkGreen.module.css

@@ -1,16 +0,0 @@
-.ns_link_green {
-    display: flex;
-    border-radius: 8px;
-    background-color: #06D182;
-    color: #ffffff;
-    border: 0;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    text-decoration: none;
-    width: 358px;
-    height: 48px;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    font-weight: 400;
-}

package/src/components/NSLinkRed.module.css

@@ -1,16 +0,0 @@
-.ns_link_red {
-    display: flex;
-    border-radius: 8px;
-    background-color: rgb(265, 63, 63, 1);
-    color: #ffffff;
-    border: 0;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    text-decoration: none;
-    width: 358px;
-    height: 48px;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    font-weight: 400;
-}