namirasoft-site-react 1.2.33 → 1.2.35

package/src/components/NSHeader.tsx

@@ -1,6 +1,7 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSHeader.module.css";
-import Nav from 'react-bootstrap/Nav';
 import Menu from '../assets/images/menu.svg';
 import Exit from '../assets/images/exit.svg';
 import NavDropdown from 'react-bootstrap/NavDropdown';
@@ -63,18 +64,18 @@ export class NSHeader extends React.Component<IProps, IState> {
                 <div className={`${Styles.ns_navbar_parent_content} container`}>
                     <img
                         src={this.props.logo}
-                        alt="logo"
+                        alt="Logo"
                         width={48}
                         height={48}
                     />
-                    <div className={`${Styles.ns_navbar_content} gap-2 d-flex justify-content-between`} >
+                    <div className={`${Styles.ns_navbar_content} `} >
                         <div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
                             {this.render_menu(0, null)}
                         </div>
-                        <div className="d-flex justify-content-center align-items-center">
-                            <span className={`me-2 ${Styles.ns_navbar_usersname}`}>name</span>
+                        <div className={`${Styles.ns_navbar_login_status}`}>
+                            <span className={`${Styles.ns_navbar_usersname}`}>name</span>
                             <img src={Exit}
-                                alt="exit"
+                                alt="Exit"
                                 width={20}
                                 height={20}
                             />
@@ -82,7 +83,7 @@ export class NSHeader extends React.Component<IProps, IState> {
                         <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
                             <img
                                 src={Menu}
-                                alt="menu"
+                                alt="Menu"
                                 width={19}
                                 height={17}
                             />
@@ -96,9 +97,9 @@ export class NSHeader extends React.Component<IProps, IState> {
     {
         let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
         return (
-            <Nav className="me-auto" >
+            <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
                 {(fs?.map(f => this.render_menuItem(level, f)))}
-            </Nav>
+            </div>
         );
     }
     private render_menuItem(level: number, filter: FilterLinkRow)
@@ -128,7 +129,7 @@ export class NSHeader extends React.Component<IProps, IState> {
         } else
         {
             return (
-                <Nav.Link className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item} href={filter.link?.url}>{filter.name}</Nav.Link>
+                <a className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
             );
         }
     }

package/src/components/NSInputDate.module.css

@@ -1,32 +1,36 @@
-.ns_parent_input{
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
+.ns_parent_input {
+	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 {
+	border-radius: 8px;
+	padding: 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
 }
-.ns_input_icon{
-    position: absolute;
-    right: 20px;
-    top: 51%;
+
+.ns_input_icon {
+	position: absolute;
+	right: 20px;
+	top: 51%;
 }
+
 .ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
+	font-size: 16px;
+	font-weight: 400;
 }
-input[type="date"]::-webkit-calendar-picker-indicator {
-    display: block;
-    background: url(../assets/images/icon-input-date.svg) no-repeat;
-    width: 24px;
-    height: 24px;
-    position: relative;
-    top: 3px;
-    left: 4px;
+
+.ns_input::-webkit-calendar-picker-indicator {
+	display: block;
+	background: url(../assets/images/icon-input-date.svg) no-repeat;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	top: 3px;
+	left: 4px;
 }

package/src/components/NSInputDate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputDate.module.css";
 
@@ -44,7 +46,8 @@ export class NSInputDate extends React.Component<IProps, IState> {
                     onChange={this.setValue}
                     type="date"
                     className={Styles.ns_input}
-                    placeholder="YYYY/MM/DD"
+					placeholder="YYYY/MM/DD"
+					id="ns-input-date"
                 />
             </div>
         );

package/src/components/NSInputDuration.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputDuration.module.css";
 import IconInputDuration from '../assets/images/icon-input-duration.svg';

package/src/components/NSInputEmail.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';

package/src/components/NSInputFloat.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';

package/src/components/NSInputIP.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputIP.module.css";
 import IconInputId from '../assets/images/icon-input-id.svg';

package/src/components/NSInputInteger.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputInteger.module.css";
 import IconInputInteger from '../assets/images/icon-input-integer.svg';

package/src/components/NSInputPhone.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputPhone.module.css";
 import IconInputPhone from '../assets/images/icon-input-phone.svg';

package/src/components/NSInputPrice.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputPrice.module.css";
 import IconInputPrice from '../assets/images/icon-input-price.svg';

package/src/components/NSInputSearch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputSearch.module.css";
 import IconInputSearch from '../assets/images/icon-input-search.svg';

package/src/components/NSInputString.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputString.module.css";
 import IconInputString from '../assets/images/icon-input-string.svg';

package/src/components/NSInputText.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputText.module.css";
 import IconInputText from '../assets/images/icon-input-text.svg';

package/src/components/NSInputTime.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSInputTime.module.css";
 import IconInputTime from '../assets/images/icon-input-time.svg';

package/src/components/NSLayout.module.css

@@ -1,7 +1,14 @@
 .ns_container {
     min-height: 100vh;
+    width: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+}
+
+.ns_header {
+    margin-bottom: auto;
+    width: 100%;
 }
 
 .ns_footer {

package/src/components/NSLayout.tsx

@@ -1,37 +1,28 @@
 import Styles from './NSLayout.module.css';
-import { Component, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { NSHeader } from './NSHeader';
 import { NSFooter } from './NSFooter';
 
 interface IProps
 {
-    scope: string;
-    logo: string;
-    title: string;
-    description?: string;
-    children: ReactNode;
+	scope: string;
+	logo: string;
+	children: ReactNode;
 }
 
-export class NSLayout extends Component<IProps>
+export function NSLayout(props: IProps)
 {
-    override render()
-    {
-        return (
-            <div className={Styles.ns_container}>
-                <div className="d-flex flex-column text-white">
-                    <NSHeader scope={this.props.scope} name="Header" logo={this.props.logo} />
-                    <div>
-                        <h1>{this.props.title}</h1>
-                        <h4 className="page-description">{this.props.description}</h4>
-                    </div>
-                    <main className="container">
-                        {this.props.children}
-                    </main>
-                </div >
-                <div className={Styles.ns_footer}>
-                    <NSFooter scope={this.props.scope} name="Footer" logo={this.props.logo} />
-                </div>
-            </div>
-        );
-    }
+	return (
+		<div className={Styles.ns_container}>
+			<header className={Styles.ns_header}>
+				<NSHeader scope={props.scope} name="Header" logo={props.logo} />
+			</header>
+			<main className="d-flex flex-column text-white">
+				{props.children}
+			</main>
+			<footer className={Styles.ns_footer}>
+				<NSFooter scope={props.scope} name="Footer" logo={props.logo} />
+			</footer>
+		</div >
+	);
 }

package/src/components/NSLayoutHeroBanner.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { NSLayout } from './NSLayout';
+
+interface IProps
+{
+	scope: string;
+	logo: string;
+	title: string;
+	description?: string;
+	banner: string;
+	children: ReactNode;
+}
+
+export function NSLayoutHeroBanner(props: IProps)
+{
+	return (
+		<NSLayout scope={props.scope} logo={props.logo} >
+			<div>
+				hero banner
+			</div>
+			{props.children}
+		</NSLayout>
+	);
+}

package/src/components/NSLayoutTitle.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { NSLayout } from './NSLayout';
+
+interface IProps
+{
+	scope: string;
+	logo: string;
+	title: string;
+	description?: string;
+	children: ReactNode;
+}
+
+export function NSLayoutTitle(props: IProps)
+{
+	return (
+		<NSLayout scope={props.scope} logo={props.logo} >
+			<div>
+				<h1 className='text-black text-center'>{props.title}</h1>
+				<p className='text-black page-description'>{props.description}</p>
+			</div>
+			{props.children}
+		</NSLayout>
+	);
+}

package/src/components/NSLinkGreen.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Style from "./NSLinkGreen.module.css";
 import React from "react";
 import { Link } from "react-router-dom";

package/src/components/NSLinkRed.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Style from "./NSLinkRed.module.css";
 import React from "react";
 import { Link } from "react-router-dom";

package/src/components/NSPagination.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import './NSPagination.module.css';
 import { Component } from 'react';
 

package/src/components/NSSelectBox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Styles from "./NSSelectBox.module.css";
 import { Select, Space } from 'antd';

package/src/components/NSTable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import "./NSTable.modules.css";
 import { Component } from 'react';
 

package/src/main.ts

@@ -15,6 +15,8 @@ export * from "./components/NSInputString";
 export * from "./components/NSInputText";
 export * from "./components/NSInputTime";
 export * from "./components/NSLayout";
+export * from "./components/NSLayoutHeroBanner";
+export * from "./components/NSLayoutTitle";
 export * from "./components/NSSelectBox";
 export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";

package/src/pages/NSLoginPage.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import "./NSLoginPage.modules.css";
 import { Component } from 'react';
 import { NSButtonGreen } from "../main";