namirasoft-site-react 1.3.60 → 1.3.61

package/src/components/NSEntityCardBackground.tsx

@@ -1,69 +1,35 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSEntityCardBackground.module.css'
-import { BackgroundProps } from '../props/BackgroundProps';
 import { NSLinkBlue } from './NSLinkBlue';
 import { LinkProps } from '../props/LinkProps';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSEntityCardBackgroundProps extends BaseComponentProps
 {
-	id?: string | number;
 	title: string;
 	link?: LinkProps
-
-	background?: BackgroundProps;
-}
-
-export interface NSEntityCardBackgroundState
-{
-	background?: BackgroundProps;
 }
 
-export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState>
+export function NSEntityCardBackground(props: NSEntityCardBackgroundProps)
 {
-
-	constructor(props: NSEntityCardBackgroundProps)
-	{
-		super(props);
-		this.state = {
-			background: {
-				image: `url(${props.background?.image})`,
-				color: props.background?.color,
-				position: props.background?.position
-			}
-		}
-	}
-
-	override render()
-	{
-		return (
-			<>
-				<article className={Styles.card_background}
-					style=
-					{{
-						backgroundImage: this.state.background?.image,
-						backgroundColor: this.state.background?.color,
-						backgroundPosition: this.state.background?.position
-					}}
-				>
-
-					<p className={Styles.card_background_text}>
-						{this.props.title}
-					</p>
-
-
-					{this.props.link &&
-						<div className={Styles.ns_card_link_container}>
-							<NSLinkBlue
-								href={this.props.link.href}
-								target={this.props.link.target}
-							/>
-						</div>
-					}
-				</article >
-			</>
-		);
-	}
+	return (
+		<>
+			<article id={props.id}
+				className={`${Styles.card_background} ${props.classList?.join(" ")}`}
+				style={props.style}
+			>
+				<p className={Styles.card_background_text}>
+					{props.title}
+				</p>
+				{
+					props.link &&
+					<div className={Styles.ns_card_link_container}>
+						<NSLinkBlue
+							href={props.link.href}
+							target={props.link.target}
+						/>
+					</div>
+				}
+			</article >
+		</>
+	);
 }

package/src/components/NSFooter.tsx

@@ -46,7 +46,10 @@ export class NSFooter extends React.Component<NSFooterProps, NSFooterState>
     override render()
     {
         return (
-            <footer className={Styles.ns_footer}>
+            <footer id={this.props.id}
+                className={`${Styles.ns_footer} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}
+            >
                 <div className={`container ${Styles.ns_package_footer}`}>
                     <div className={`${Styles.ns_footer_parent_items}`}>
                         <div className={`${Styles.ns_footer_project_logo_tablet}`}>

package/src/components/NSHeader.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import Styles from "./NSHeader.module.css";
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
-import { BackgroundProps } from "../props/BackgroundProps";
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSHeaderProps extends BaseComponentProps
@@ -13,7 +12,7 @@ export interface NSHeaderProps extends BaseComponentProps
     name: string;
     logo: string;
     account?: boolean;
-    background?: BackgroundProps;
+    nav?: BaseComponentProps
 }
 
 export interface NSHeaderState
@@ -62,12 +61,22 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
     }
     override render()
     {
+        let nav: BaseComponentProps | undefined = this.props.nav;
+        if (!nav)
+            nav = { style: {} };
+        if (!nav.style)
+            nav.style = {};
+        if (!nav.style?.backgroundColor)
+            nav.style.backgroundColor = "rgba(20, 27, 92, 1)";
         return (
-            <header className={Styles.ns_header}>
-                <nav className={Styles.ns_navbar}
-                    style={{
-                        backgroundColor: this.props.background?.color ? this.props.background?.color : "rgba(20, 27, 92, 1)"
-                    }}
+            <header id={this.props.id}
+                className={`${Styles.ns_header} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}
+            >
+                <nav
+                    id={this.props.nav?.id}
+                    className={`${Styles.ns_navbar} ${this.props.nav?.classList?.join(" ")}`}
+                    style={nav?.style}
                 >
                     <div className={`${Styles.ns_navbar_parent_content} container`}>
                         <a href="/">

package/src/components/NSInputDate.tsx

@@ -49,7 +49,9 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     {
         return (
             <>
-                <div className={`${Styles.ns_parent_input} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+                <div className={`${Styles.ns_parent_input} p-2 ${this.props.classList?.join(" ")}`}
+                    style={this.props.style}
+                >
                     <span className={Styles.ns_input_title}>{this.props.title}</span>
                     <input
                         value={this.state.value}
@@ -57,7 +59,7 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
                         type="date"
                         className={Styles.ns_input}
                         placeholder={this.props.placeholder}
-                        id="ns-input-date"
+                        id={this.props.id}
                         onClick={() => { }}
                     />
                 </div>

package/src/components/NSLayout.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import Styles from './NSLayout.module.css';
 import { ReactNode } from 'react';
 import { NSHeader } from './NSHeader';
@@ -19,7 +17,9 @@ export interface NSLayoutProps extends BaseComponentProps
 export function NSLayout(props: NSLayoutProps)
 {
 	return (
-		<div className={Styles.ns_container}>
+		<div id={props.id}
+			className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
+			style={props.style}>
 			<NSHeader scope={props.scope} name="Header" logo={props.logo} />
 			{props.notifications.map(props => <NSNotification {...props}></NSNotification>)}
 			<main className="d-flex flex-column text-white" style={{ background: props.background }}>

package/src/components/NSLayoutHeroBanner.tsx

@@ -20,7 +20,6 @@ export function NSLayoutHeroBanner(props: NSLayoutHeroBannerProps)
 	return (
 		<NSLayout {...props} >
 			<div className={Styles.hero_holder}>
-				{/* <NSHeader name='Header' scope='Namira Software Corporation' logo='https://static.namirasoft.com/logo/namirasoft/base.png' /> */}
 				<section className={Styles.hero_wraper}>
 					<div className="container mx-auto px-4 lg:px-12">
 						<div className="flex flex-wrap lg:flex-nowrap justify-center lg:justify-between">

package/src/components/NSLinkBlue.tsx

@@ -1,42 +1,22 @@
-"use client";
-
 import { BaseComponentProps } from "../props/BaseComponentProps";
 import { LinkProps } from "../props/LinkProps";
 import Styles from "./NSLinkBlue.module.css";
-import React from "react";
 
 export interface NSLinkBlueProps extends LinkProps, BaseComponentProps
 {
 }
 
-export interface NSLinkBlueState extends LinkProps
+export function NSLinkBlue(props: NSLinkBlueProps)
 {
-}
-
-export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> 
-{
-	constructor(props: NSLinkBlueProps)
-	{
-		super(props);
-		this.state = { title: props.title, href: props.href, target: props.target };
-	}
-	setTitle(title: string)
-	{
-		this.setState({ title });
-	}
-	setHRef(href: string)
-	{
-		this.setState({ href });
-	}
-	override render()
-	{
-		return (
-
-			<div className={Styles.ns_link_parent} style={this.props.style}>
-				<a className={`text-white text-decoration-none ${this.props.title ? Styles.ns_link : Styles.ns_link_absolute}`} href={this.state.href} target={this.state?.target ?? "_self"} >
-					{this.state.title}
-				</a>
-			</div>
-		)
-	}
+	return (
+		<div
+			id={props.id}
+			className={Styles.ns_link_parent}
+			style={props.style}
+		>
+			<a className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`} href={props.href} target={props?.target ?? "_self"} >
+				{props.title}
+			</a>
+		</div>
+	)
 }

package/src/components/NSLoading.tsx

@@ -1,27 +1,18 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSLoading.module.css';
 import { NSSection } from './NSSection';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSLoadingProps extends BaseComponentProps
 {
-	background?: BackgroundProps;
 }
 
-export class NSLoading extends Component<NSLoadingProps>
+export function NSLoading(props: NSLoadingProps)
 {
-	override render()
-	{
-		return (
-			<NSSection background={this.props.background} >
-				<div className={Styles.ns_loading_parent}>
-					<div className={Styles.ns_loader}></div>
-				</div>
-			</NSSection>
-		);
-	}
+	return (
+		<NSSection {...props}>
+			<div className={Styles.ns_loading_parent}>
+				<div className={Styles.ns_loader}></div>
+			</div>
+		</NSSection>
+	);
 }
-

package/src/components/NSNotification.tsx

@@ -47,21 +47,26 @@ export class NSNotification extends React.Component<NSNotificationProps, NSNotif
 
     override render()
     {
-        let style = Styles["ns_" + this.props.type.toString().toLowerCase];
+        let className = Styles["ns_" + this.props.type.toString().toLowerCase];
         return <>
-            {this.state.show && (
-                <div className={`${Styles.ns_messenger} ${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>
-            )}
+            {
+                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>
+                )
+            }
         </>
     }
 }

package/src/components/NSPagination.tsx

@@ -15,8 +15,7 @@ export interface NSPaginationState
     size: number;
     page: number;
 }
-
-export class NSPagination extends Component<NSPaginationState, NSPaginationProps>
+export class NSPagination extends Component<NSPaginationProps, NSPaginationState>
 {
     constructor(props: NSPaginationProps)
     {
@@ -88,7 +87,9 @@ export class NSPagination extends Component<NSPaginationState, NSPaginationProps
         );
 
         return (
-            <div className={`${Styles.ns_pagination_container}`}>
+            <div id={this.props.id}
+                className={`${Styles.ns_pagination_container} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}>
                 {arr.map(x => (x))}
             </div>
         );

package/src/components/NSPanel.tsx

@@ -1,6 +1,4 @@
-"use client";
-
-import { Component, ReactNode } from "react";
+import { ReactNode } from "react";
 import Styles from './NSPanel.module.css';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
@@ -9,23 +7,14 @@ export interface NSSectionProps extends BaseComponentProps
     children: ReactNode;
     grid: boolean;
 }
-
-export interface NSSectionState
-{ }
-
-export class NSPanel extends Component<NSSectionProps, NSSectionState>
+export function NSPanel(props: NSSectionProps)
 {
-    constructor(props: NSSectionProps)
-    {
-        super(props);
-    }
-    override render()
-    {
-        return (
-            <section
-                className={this.props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} >
-                {this.props.children}
-            </section>
-        );
-    }
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSSection.tsx

@@ -1,50 +1,24 @@
-"use client";
-
-import { Component, ReactNode } from "react";
+import { ReactNode } from "react";
 import Styles from './NSSection.module.css'
-import { BackgroundProps } from "../props/BackgroundProps";
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionProps extends BaseComponentProps
 {
 	children: ReactNode;
-	background?: BackgroundProps;
 	center_items?: boolean;
 }
 
-export interface NSSectionState
-{
-	background?: BackgroundProps;
-}
-
-export class NSSection extends Component<NSSectionProps, NSSectionState>
+export function NSSection(props: NSSectionProps)
 {
-	constructor(props: NSSectionProps)
-	{
-		super(props);
-		this.state = {
-			background: {
-				image: `url(${props.background?.image})`,
-				color: props.background?.color,
-				position: props.background?.position
-			}
-		}
-	}
-	override render()
-	{
-		let styles = [Styles.ns_section];
-		if (this.props.center_items)
-			styles.push(Styles.ns_section_center);
-		return (
-			<section style=
-				{{
-					backgroundImage: this.state.background?.image,
-					backgroundColor: this.state.background?.color,
-					backgroundPosition: this.state.background?.position
-				}}
-				className={styles.join(" ")} >
-				{this.props.children}
-			</section>
-		);
-	}
+	let styles = [Styles.ns_section];
+	if (props.center_items)
+		styles.push(Styles.ns_section_center);
+	return (
+		<section id={props.id}
+			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.children}
+		</section>
+	);
 }

package/src/components/NSSectionBars.tsx

@@ -1,35 +1,25 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSSectionBars.module.css';
 import { NSEntityBar, NSEntityBarProps } from './NSEntityBar';
 import { NSSection } from './NSSection';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionBarsProps extends BaseComponentProps
 {
-	background?: BackgroundProps;
 	bars: NSEntityBarProps[]
 }
 
-export class NSSectionBars extends Component<NSSectionBarsProps>
+export function NSSectionBars(props: NSSectionBarsProps)
 {
-	override render()
-	{
-		return (
-			<>
-				<NSSection background={this.props.background} >
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-						{
-							this.props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
-						}
-					</div>
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-				</NSSection>
-			</>
-		);
-	}
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionCards.tsx

@@ -1,67 +1,52 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSSectionCards.module.css';
-import { NSTitle } from './NSTitle';
+import { NSTitle, NSTitleProps } from './NSTitle';
 import { NSCard, NSCardProps } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { LinkProps } from '../props/LinkProps';
 
 export interface NSSectionCardsProps extends BaseComponentProps
 {
-	title?: {
-		text: string,
-		color?: string
-	};
+	title?: NSTitleProps;
 	description?: {
 		text: string,
 		color?: string
 	};
-	background?: BackgroundProps
-	button?: {
-		href: string;
-		title: string;
-	};
+	button?: LinkProps;
 	cards: NSCardProps[];
 }
 
-export class NSSectionCards extends Component<NSSectionCardsProps>
+export function NSSectionCards(props: NSSectionCardsProps) 
 {
-	override render()
-	{
-		return (
-			<>
-				<NSSection background={this.props.background} >
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
-						{
-							this.props.title &&
-							<div className={Styles.ns_section_cards_title_container}>
-								<NSTitle color={this.props.title?.color} title={this.props.title?.text} />
-								{
-									this.props.description &&
-									<p style={{ color: this.props.description?.color }} className={Styles.ns_description}> {this.props.description.text} </p>
-								}
-							</div>
-						}
-						<div className={` ${Styles.ns_card_container}`}>
-							{
-								this.props.cards?.map((card) => <NSCard key={card.id} {...card} />)
-							}
-						</div>
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+				{
+					props.title &&
+					<div className={Styles.ns_section_cards_title_container}>
+						<NSTitle {...props.title} />
 						{
-							this.props.button &&
-							<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
-								<NSLinkBlue href={this.props.button?.href} title={this.props.button?.title} />
-							</div>
+							props.description &&
+							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
 						}
 					</div>
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-				</NSSection>
-			</>
-		);
-	}
+				}
+				<div className={` ${Styles.ns_card_container}`}>
+					{
+						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
+					}
+				</div>
+				{
+					props.button &&
+					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
+						<NSLinkBlue {...props.button} />
+					</div>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionTitle.tsx

@@ -1,32 +1,22 @@
-"use client";
-
-import { Component, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { NSSection } from './NSSection';
-import { NSTitle } from './NSTitle';
-import { BackgroundProps } from '../props/BackgroundProps';
+import { NSTitle, NSTitleProps } from './NSTitle';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionTitleProps extends BaseComponentProps
 {
-	title: {
-		text: string,
-		color?: string
-	};
-	background?: BackgroundProps
+	title: NSTitleProps;
 	children: ReactNode
 }
 
-export class NSSectionTitle extends Component<NSSectionTitleProps>
+export function NSSectionTitle(props: NSSectionTitleProps)
 {
-	override render()
-	{
-		return (
-			<NSSection background={this.props.background} >
-				<NSSpace size={NSSpaceSizeType.NORMAL} />
-				<NSTitle color={this.props.title.color} title={this.props.title.text} />
-				{this.props.children}
-			</NSSection>
-		);
-	}
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<NSTitle {...props.title} />
+			{props.children}
+		</NSSection>
+	);
 }

package/src/components/NSSpace.tsx

@@ -22,6 +22,8 @@ export enum NSSpaceSizeType
 export function NSSpace(props: NSSpaceProps)
 {
     return (
-        <hr style={{ width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
+        <hr id={props.id}
+            className={props.classList?.join(" ")}
+            style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
     );
 }