namirasoft-site-react 1.3.8 → 1.3.10

package/src/components/NSEntityBar.module.css

@@ -2,28 +2,36 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
-	align-items: flex-start;
+	/* align-items: flex-start; */
 	gap: 24px;
 	padding: 24px;
 	box-shadow: 0 2px 10px 4px #00000040;
 	width: 100%;
 	max-width: 358px;
+	border-radius: 24px;
 }
 
 .ns_entity_bar_image_container {
 	width: 100%;
 }
 
+.ns_entity_bar_image {
+	border-radius: 16px;
+	object-fit: cover;
+	width: 100% !important;
+	height: 100% !important;
+}
+
 .ns_entity_bar_details_container {
 	text-align: start;
 }
 
 .ns_entity_bar_image_title {
 	color: #001664;
-	font-size: 32px;
+	font-size: 24px;
 	font-weight: 700;
 	font-family: inherit;
-	line-height: 32px;
+	line-height: 24px;
 	margin-bottom: 16px;
 	text-align: start;
 }
@@ -37,12 +45,12 @@
 	text-align: justify;
 }
 
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1024px) {
 	.ns_entity_bar_item {
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-start;
-		align-items: flex-start;
+		/* align-items: flex-start; */
 		gap: 48px;
 		width: 100%;
 		max-width: 1170px;
@@ -50,5 +58,21 @@
 
 	.ns_entity_bar_details_container {
 		padding: 24px 0;
+		width: 68%;
+	}
+
+	.ns_entity_bar_image_container {
+		width: 30%;
+		max-width: 310px;
 	}
+	
+	.ns_entity_bar_image_title {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.ns_entity_bar_image {
+		border-radius: 8px;
+	}
+
 }

package/src/components/NSEntityBar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Component } from 'react';
-
 import Styles from './NSEntityBar.module.css'
 
 export interface NSEntityBarProps
@@ -21,7 +20,7 @@ export class NSEntityBar extends Component<NSEntityBarProps> {
 		return (
 			<article className={Styles.ns_entity_bar_item}>
 				<figure className={Styles.ns_entity_bar_image_container}>
-					<img src={this.props.image.src} alt={this.props.image.alt} width={310} height={240} />
+					<img className={Styles.ns_entity_bar_image} src={this.props.image.src} alt={this.props.image.alt} width={310} height={240} />
 				</figure>
 				<div className={Styles.ns_entity_bar_details_container}>
 					<h3 className={Styles.ns_entity_bar_image_title}> {this.props.title} </h3>

package/src/components/NSEntityCardBackground.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { Component } from 'react';
-
 import Styles from './NSEntityCardBackground.module.css'
 import { Background } from '../types/Background';
 
-export interface IProps
+export interface NSEntityCardBackgroundProps
 {
 	id?: string | number;
 	title: string;
@@ -18,14 +17,14 @@ export interface IProps
 	background?: Background;
 }
 
-interface IState
+export interface NSEntityCardBackgroundState
 {
 	background?: Background;
 }
 
-export class NSEntityCardBackground extends Component<IProps, IState> {
+export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState> {
 
-	constructor(props: IProps)
+	constructor(props: NSEntityCardBackgroundProps)
 	{
 		super(props);
 		this.state = {

package/src/components/NSFooter.tsx

@@ -4,22 +4,22 @@ import React from "react";
 import Styles from "./NSFooter.module.css";
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
 
-interface IProps
+export interface NSFooterProps
 {
     scope: string;
     name: string;
     logo: string;
 }
 
-interface IState
+export interface NSFooterState
 {
     filters: FilterLinkRow[];
     selected: FilterLinkRow | null;
 }
 
-export class NSFooter extends React.Component<IProps, IState>
+export class NSFooter extends React.Component<NSFooterProps, NSFooterState>
 {
-    constructor(props: IProps)
+    constructor(props: NSFooterProps)
     {
         super(props);
         this.state = {

package/src/components/NSHeader.tsx

@@ -2,29 +2,28 @@
 
 import React from "react";
 import Styles from "./NSHeader.module.css";
-
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
 import { Background } from "../types/Background";
 
-interface IProps
+export interface NSHeaderProps
 {
     scope: string;
     name: string;
-	logo: string;
-	account?: boolean;
-	background?: Background;
+    logo: string;
+    account?: boolean;
+    background?: Background;
 }
 
-interface IState
+export interface NSHeaderState
 {
     filters: FilterLinkRow[];
     selected: FilterLinkRow | null;
     showNavbar: boolean;
 }
 
-export class NSHeader extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState> {
+    constructor(props: NSHeaderProps)
     {
         super(props);
         this.state = {
@@ -61,49 +60,49 @@ export class NSHeader extends React.Component<IProps, IState> {
     }
     override render()
     {
-		return (
-				<header>		
-				<nav className={Styles.ns_navbar}
-					style={{
-						backgroundColor: this.props.background?.color ?this.props.background?.color : "#0000004d"
-					}}
-				>
-					<div className={`${Styles.ns_navbar_parent_content} container`}>
-						<a href="/">
-							<img
-								src={this.props.logo}
-								alt="Logo"
-								width={48}
-								height={48}
-							/>
-						</a>
-						<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>
-							{this.props.account && 
-								<div className={`${Styles.ns_navbar_login_status}`}>
-									<span className={`${Styles.ns_navbar_usersname}`}>name</span>
-									<img src='https://static.namirasoft.com/image/logout.svg'
-										alt="Exit"
-										width={20}
-										height={20}
-										/>
-								</div>
-							}
-								<div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
-									<img
-										src='https://static.namirasoft.com/image/menu.svg'
-										alt="Menu"
-										width={19}
-										height={17}
-										/>
-								</div>
-								
-						</div>
-					</div>
-				</nav>
-			</header>
+        return (
+            <header>
+                <nav className={Styles.ns_navbar}
+                    style={{
+                        backgroundColor: this.props.background?.color ? this.props.background?.color : "#0000004d"
+                    }}
+                >
+                    <div className={`${Styles.ns_navbar_parent_content} container`}>
+                        <a href="/">
+                            <img
+                                src={this.props.logo}
+                                alt="Logo"
+                                width={48}
+                                height={48}
+                            />
+                        </a>
+                        <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>
+                            {this.props.account &&
+                                <div className={`${Styles.ns_navbar_login_status}`}>
+                                    <span className={`${Styles.ns_navbar_usersname}`}>name</span>
+                                    <img src='https://static.namirasoft.com/image/logout.svg'
+                                        alt="Exit"
+                                        width={20}
+                                        height={20}
+                                    />
+                                </div>
+                            }
+                            <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
+                                <img
+                                    src='https://static.namirasoft.com/image/menu.svg'
+                                    alt="Menu"
+                                    width={19}
+                                    height={17}
+                                />
+                            </div>
+
+                        </div>
+                    </div>
+                </nav>
+            </header>
         );
     }
     private render_menu(level: number, parent_id: number | null)

package/src/components/NSInputDate.tsx

@@ -3,18 +3,18 @@
 import React from "react";
 import Styles from "./NSInputDate.module.css";
 
-interface IProps
+export interface NSInputDateProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputDateState
 {
     value: string;
 }
 
-export class NSInputDate extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateState> {
+    constructor(props: NSInputDateProps)
     {
         super(props);
         this.state = {
@@ -46,8 +46,8 @@ export class NSInputDate extends React.Component<IProps, IState> {
                     onChange={this.setValue}
                     type="date"
                     className={Styles.ns_input}
-					placeholder="YYYY/MM/DD"
-					id="ns-input-date"
+                    placeholder="YYYY/MM/DD"
+                    id="ns-input-date"
                 />
             </div>
         );

package/src/components/NSInputDuration.tsx

@@ -4,18 +4,18 @@ import React from "react";
 import Styles from "./NSInputDuration.module.css";
 import IconInputDuration from '../assets/images/icon-input-duration.svg';
 
-interface IProps
+export interface NSInputDurationProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputDurationState
 {
     value: string;
 }
 
-export class NSInputDuration extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputDuration extends React.Component<NSInputDurationProps, NSInputDurationState> {
+    constructor(props: NSInputDurationProps)
     {
         super(props);
         this.state = {
@@ -60,6 +60,4 @@ export class NSInputDuration extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSInputEmail.tsx

@@ -5,19 +5,19 @@ import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import Danger from '../assets/images/danger.svg';
 
-interface IProps
+export interface NSInputEmailProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputEmailState
 {
     value: string;
     error: boolean;
 }
 
-export class NSInputEmail extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState> {
+    constructor(props: NSInputEmailProps)
     {
         super(props);
         this.state = {
@@ -87,6 +87,4 @@ export class NSInputEmail extends React.Component<IProps, IState> {
             </>
         );
     }
-}
-
-
+}

package/src/components/NSInputFloat.tsx

@@ -4,18 +4,18 @@ import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';
 
-interface IProps
+export interface NSInputFloatProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputFloatState
 {
     value: string;
 }
 
-export class NSInputFloat extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState> {
+    constructor(props: NSInputFloatProps)
     {
         super(props);
         this.state = {

package/src/components/NSInputIP.tsx

@@ -4,18 +4,18 @@ import React from "react";
 import Styles from "./NSInputIP.module.css";
 import IconInputId from '../assets/images/icon-input-id.svg';
 
-interface IProps
+export interface NSInputIPProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputIPState
 {
     value: string;
 }
 
-export class NSInputIP extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState> {
+    constructor(props: NSInputIPProps)
     {
         super(props);
         this.state = {
@@ -60,6 +60,4 @@ export class NSInputIP extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSInputInteger.tsx

@@ -4,18 +4,18 @@ import React from "react";
 import Styles from "./NSInputInteger.module.css";
 import IconInputInteger from '../assets/images/icon-input-integer.svg';
 
-interface IProps
+export interface NSInputIntegerProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputIntegerState
 {
     value: string;
 }
 
-export class NSInputInteger extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInputIntegerState> {
+    constructor(props: NSInputIntegerProps)
     {
         super(props);
         this.state = {

package/src/components/NSInputPhone.tsx

@@ -6,18 +6,18 @@ 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
+export interface NSInputPhoneProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputPhoneState
 {
     value: string;
 }
 
-export class NSInputPhone extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputPhone extends React.Component<NSInputPhoneProps, NSInputPhoneState> {
+    constructor(props: NSInputPhoneProps)
     {
         super(props);
         this.state = {
@@ -60,6 +60,4 @@ export class NSInputPhone extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSInputPrice.tsx

@@ -4,20 +4,20 @@ import React from "react";
 import Styles from "./NSInputPrice.module.css";
 import IconInputPrice from '../assets/images/icon-input-price.svg';
 
-interface IProps
+export interface NSInputPriceProps
 {
     title: string;
     defaultValue?: number;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-interface IState
+export interface NSInputPriceState
 {
     value: number | undefined;
 }
 
-export class NSInputPrice extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputPrice extends React.Component<NSInputPriceProps, NSInputPriceState> {
+    constructor(props: NSInputPriceProps)
     {
         super(props);
         this.state = {
@@ -45,7 +45,7 @@ export class NSInputPrice extends React.Component<IProps, IState> {
     {
         return (
             <div className={`${Styles.ns_input_parent} p-2`}>
-                 <img
+                <img
                     className={Styles.ns_input_icon}
                     src={IconInputPrice}
                     alt="icon"
@@ -63,6 +63,4 @@ export class NSInputPrice extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSInputSearch.tsx

@@ -4,18 +4,18 @@ import React from "react";
 import Styles from "./NSInputSearch.module.css";
 import IconInputSearch from '../assets/images/icon-input-search.svg';
 
-interface IProps
+export interface NSInputSearchProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputSearchState
 {
     value: string;
 }
 
-export class NSInputSearch extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSearchState> {
+    constructor(props: NSInputSearchProps)
     {
         super(props);
         this.state = {
@@ -73,6 +73,4 @@ export class NSInputSearch extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSInputString.tsx

@@ -4,21 +4,21 @@ import React from "react";
 import Styles from "./NSInputString.module.css";
 import IconInputString from '../assets/images/icon-input-string.svg';
 
-interface IProps
+export interface NSInputStringProps
 {
     title: string;
     defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-interface IState
+export interface NSInputStringState
 {
     value: string;
 }
 
-export class NSInputString extends React.Component<IProps, IState>
+export class NSInputString extends React.Component<NSInputStringProps, NSInputStringState>
 {
-    constructor(props: IProps)
+    constructor(props: NSInputStringProps)
     {
         super(props);
         this.state = {

package/src/components/NSInputText.tsx

@@ -4,20 +4,20 @@ import React from "react";
 import Styles from "./NSInputText.module.css";
 import IconInputText from '../assets/images/icon-input-text.svg';
 
-interface IProps
+export interface NSInputTextProps
 {
     title: string;
     defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-interface IState
+export interface NSInputTextState
 {
     value: string;
 }
 
-export class NSInputText extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputText extends React.Component<NSInputTextProps, NSInputTextState> {
+    constructor(props: NSInputTextProps)
     {
         super(props);
         this.state = {
@@ -64,6 +64,4 @@ export class NSInputText extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSInputTime.tsx

@@ -4,18 +4,18 @@ import React from "react";
 import Styles from "./NSInputTime.module.css";
 import IconInputTime from '../assets/images/icon-input-time.svg';
 
-interface IProps
+export interface NSInputTimeProps
 {
     title: string;
 }
 
-interface IState
+export interface NSInputTimeState
 {
     value: string;
 }
 
-export class NSInputTime extends React.Component<IProps, IState> {
-    constructor(props: IProps)
+export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeState> {
+    constructor(props: NSInputTimeProps)
     {
         super(props);
         this.state = {
@@ -60,6 +60,4 @@ export class NSInputTime extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
-
-
+}

package/src/components/NSLayout.tsx

@@ -6,14 +6,14 @@ import { ReactNode } from 'react';
 import { NSHeader } from './NSHeader';
 import { NSFooter } from './NSFooter';
 
-interface IProps
+export interface NSLayoutProps
 {
 	scope: string;
 	logo: string;
 	children: ReactNode;
 }
 
-export function NSLayout(props: IProps)
+export function NSLayout(props: NSLayoutProps)
 {
 	return (
 		<div className={Styles.ns_container}>