namirasoft-site-react 1.4.339 → 1.4.340

package/src/components/NSSectionCards.tsx

@@ -1,52 +1,52 @@
-import Styles from './NSSectionCards.module.css';
-import { NSTitle } from './NSTitle';
-import { NSCard, NSCardProps } from './NSCard';
-import { NSSection } from './NSSection';
-import { NSLinkBlue } from './NSLinkBlue';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from '../props/ILinkProps';
-
-export interface NSSectionCardsProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: {
-		text: string,
-		color?: string
-	};
-	button?: ILinkProps;
-	cards: NSCardProps[];
-}
-
-export function NSSectionCards(props: NSSectionCardsProps) 
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
-				{
-					props.title &&
-					<div className={Styles.ns_section_cards_title_container}>
-						<NSTitle title={props.title} />
-						{
-							props.description &&
-							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
-						}
-					</div>
-				}
-				<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>
-	);
+import Styles from './NSSectionCards.module.css';
+import { NSTitle } from './NSTitle';
+import { NSCard, NSCardProps } from './NSCard';
+import { NSSection } from './NSSection';
+import { NSLinkBlue } from './NSLinkBlue';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from '../props/ILinkProps';
+
+export interface NSSectionCardsProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: {
+		text: string,
+		color?: string
+	};
+	button?: ILinkProps;
+	cards: NSCardProps[];
+}
+
+export function NSSectionCards(props: NSSectionCardsProps) 
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+				{
+					props.title &&
+					<div className={Styles.ns_section_cards_title_container}>
+						<NSTitle title={props.title} />
+						{
+							props.description &&
+							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
+						}
+					</div>
+				}
+				<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/NSSectionTiles.module.css

@@ -1,11 +1,11 @@
-.ns_entity_bar_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	gap: 24px;
+.ns_entity_bar_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	gap: 24px;
 }

package/src/components/NSSectionTiles.tsx

@@ -1,26 +1,26 @@
-import Styles from './NSSectionTiles.module.css';
-import { NSTile, NSTileProps } from './NSTile';
-import { NSSection } from './NSSection';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSSectionTilesProps extends IBaseComponentProps
-{
-	title?: string;
-	tiles: NSTileProps[]
-}
-
-export function NSSectionTiles(props: NSSectionTilesProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-				{
-					props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionTiles.module.css';
+import { NSTile, NSTileProps } from './NSTile';
+import { NSSection } from './NSSection';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSSectionTilesProps extends IBaseComponentProps
+{
+	title?: string;
+	tiles: NSTileProps[]
+}
+
+export function NSSectionTiles(props: NSSectionTilesProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionTitle.tsx

@@ -1,22 +1,22 @@
-import { ReactNode } from 'react';
-import { NSSection } from './NSSection';
-import { NSTitle } from './NSTitle';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSSectionTitleProps extends IBaseComponentProps
-{
-	title: string;
-	children: ReactNode
-}
-
-export function NSSectionTitle(props: NSSectionTitleProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<NSTitle title={props.title} />
-			{props.children}
-		</NSSection>
-	);
+import { ReactNode } from 'react';
+import { NSSection } from './NSSection';
+import { NSTitle } from './NSTitle';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSSectionTitleProps extends IBaseComponentProps
+{
+	title: string;
+	children: ReactNode
+}
+
+export function NSSectionTitle(props: NSSectionTitleProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<NSTitle title={props.title} />
+			{props.children}
+		</NSSection>
+	);
 }

package/src/components/NSSpace.tsx

@@ -1,29 +1,29 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSSpaceProps extends IBaseComponentProps
-{
-	size: NSSpaceSizeType;
-}
-
-export enum NSSpaceSizeType
-{
-	NANO = "4px",
-	MICRO = "8px",
-	MINI = "16px",
-	SMALL = "24px",
-	MEDUIM = "32px",
-	NORMAL = "48px",
-	LARGE = "64px",
-	XLARGE = "80px",
-	XXLARGE = "96px",
-	XXXLARGE = "128px",
-}
-
-export function NSSpace(props: NSSpaceProps)
-{
-	return (
-		<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, position: "relative", zIndex: -1 }} />
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSSpaceProps extends IBaseComponentProps
+{
+	size: NSSpaceSizeType;
+}
+
+export enum NSSpaceSizeType
+{
+	NANO = "4px",
+	MICRO = "8px",
+	MINI = "16px",
+	SMALL = "24px",
+	MEDUIM = "32px",
+	NORMAL = "48px",
+	LARGE = "64px",
+	XLARGE = "80px",
+	XXLARGE = "96px",
+	XXXLARGE = "128px",
+}
+
+export function NSSpace(props: NSSpaceProps)
+{
+	return (
+		<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, position: "relative", zIndex: -1 }} />
+	);
 }

package/src/components/NSTabPage.module.css

@@ -1,60 +1,60 @@
-.ns_tab_page_panel {
-    border-radius: 8px;
-    overflow: hidden;
-    background: #141B5C;
-    padding: 16px;
-    width: 100%;
-}
-
-.ns_tab_page_panel ul.ns_tab_page_titles_container {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    overflow-x: auto;
-}
-
-.ns_tab_page_panel li.ns_tab_page_title {
-    text-align: center;
-    padding: 0px 16px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    border-right: 1px solid #fff;
-    margin: 14px 0;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
-    border-right: none;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
-    background-color: #fff;
-    border-radius: 8px 8px 0 0;
-    color: #141B5C;
-    margin: 0;
-    padding: 14px 16px;
-    box-shadow: 0px 2px 2px 2px #141B5C;
-}
-
-.ns_tab_content_column {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    gap: 0;
-    border-right: 1px solid #ccc;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-}
-
-/* .ns_tab_content_grid {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    display: grid !important;
-    gap: 0;
-    border-right: 1px solid #ccc;
+.ns_tab_page_panel {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C;
+    padding: 16px;
+    width: 100%;
+}
+
+.ns_tab_page_panel ul.ns_tab_page_titles_container {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow-x: auto;
+}
+
+.ns_tab_page_panel li.ns_tab_page_title {
+    text-align: center;
+    padding: 0px 16px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    border-right: 1px solid #fff;
+    margin: 14px 0;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
+    border-right: none;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
+    background-color: #fff;
+    border-radius: 8px 8px 0 0;
+    color: #141B5C;
+    margin: 0;
+    padding: 14px 16px;
+    box-shadow: 0px 2px 2px 2px #141B5C;
+}
+
+.ns_tab_content_column {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    gap: 0;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow-y: auto;
+}
+
+/* .ns_tab_content_grid {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    display: grid !important;
+    gap: 0;
+    border-right: 1px solid #ccc;
 } */

package/src/components/NSTabPage.tsx

@@ -1,92 +1,92 @@
-"use client";
-import { Component } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSTabPage.module.css';
-
-export interface NSTabPageTab extends IBaseComponentProps
-{
-	title: string;
-	clicked: boolean;
-	getContent: () => React.ReactNode;
-}
-
-export interface NSTabPageProps extends IBaseComponentProps
-{
-	tabs: NSTabPageTab[]
-	container?: IBaseComponentProps
-	activeTabIndex?: number;
-}
-
-export interface NSTabPageState
-{
-	activeTabIndex: number;
-	isClicked: boolean[];
-}
-
-export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
-{
-	constructor(props: NSTabPageProps)
-	{
-		super(props);
-		let activeTabIndex = this.props.activeTabIndex ?? 0;
-		this.state = {
-			activeTabIndex,
-			isClicked: this.props.tabs.map((tab, index) => tab.clicked || activeTabIndex === index)
-		};
-	}
-	setClicked(indices: number[], callback: () => void)
-	{
-		let isClicked = this.state.isClicked;
-		for (let i = 0; i < indices.length; i++)
-			isClicked[indices[i]] = true;
-		this.setState({ isClicked }, callback);
-	}
-	override render()
-	{
-		return (
-			<div
-				id={this.props.id}
-				className={`${Styles.ns_tab_page_panel} ${this.props.classList?.join(" ") ?? ""}`}
-				style={this.props.style}>
-				<ul className={Styles.ns_tab_page_titles_container}>
-					{
-						this.props.tabs.map((tab, index) => (
-							<li
-								key={`NSTabPage_li_key_${index}`}
-								className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
-								onClick={() =>
-								{
-									let isClicked = this.state.isClicked;
-									isClicked[index] = true;
-									this.setState({ activeTabIndex: index, isClicked })
-								}}
-							>
-								{tab.title}
-							</li>
-						))
-					}
-				</ul>
-				<div
-					id={this.props.container?.id}
-					className={this.props.container?.classList?.join(" ") ?? ""}
-					style={{ ...this.props.container?.style }}
-				>
-					{
-						this.props.tabs.map((tab, index) => (
-							<div
-								id={tab.id}
-								key={`NSTabPage_div_key_${this.props.name}_${index}`}
-								className={`${Styles.ns_tab_content_column} ${tab.classList?.join(" ") ?? ""}`}
-								style={{ ...tab.style, display: index === this.state.activeTabIndex ? "flex" : "none" }}
-							>
-								{
-									this.state.isClicked[index] ? tab.getContent() : <></>
-								}
-							</div>
-						))
-					}
-				</div>
-			</div>
-		);
-	}
+"use client";
+import { Component } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSTabPage.module.css';
+
+export interface NSTabPageTab extends IBaseComponentProps
+{
+	title: string;
+	clicked: boolean;
+	getContent: () => React.ReactNode;
+}
+
+export interface NSTabPageProps extends IBaseComponentProps
+{
+	tabs: NSTabPageTab[]
+	container?: IBaseComponentProps
+	activeTabIndex?: number;
+}
+
+export interface NSTabPageState
+{
+	activeTabIndex: number;
+	isClicked: boolean[];
+}
+
+export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
+{
+	constructor(props: NSTabPageProps)
+	{
+		super(props);
+		let activeTabIndex = this.props.activeTabIndex ?? 0;
+		this.state = {
+			activeTabIndex,
+			isClicked: this.props.tabs.map((tab, index) => tab.clicked || activeTabIndex === index)
+		};
+	}
+	setClicked(indices: number[], callback: () => void)
+	{
+		let isClicked = this.state.isClicked;
+		for (let i = 0; i < indices.length; i++)
+			isClicked[indices[i]] = true;
+		this.setState({ isClicked }, callback);
+	}
+	override render()
+	{
+		return (
+			<div
+				id={this.props.id}
+				className={`${Styles.ns_tab_page_panel} ${this.props.classList?.join(" ") ?? ""}`}
+				style={this.props.style}>
+				<ul className={Styles.ns_tab_page_titles_container}>
+					{
+						this.props.tabs.map((tab, index) => (
+							<li
+								key={`NSTabPage_li_key_${index}`}
+								className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
+								onClick={() =>
+								{
+									let isClicked = this.state.isClicked;
+									isClicked[index] = true;
+									this.setState({ activeTabIndex: index, isClicked })
+								}}
+							>
+								{tab.title}
+							</li>
+						))
+					}
+				</ul>
+				<div
+					id={this.props.container?.id}
+					className={this.props.container?.classList?.join(" ") ?? ""}
+					style={{ ...this.props.container?.style }}
+				>
+					{
+						this.props.tabs.map((tab, index) => (
+							<div
+								id={tab.id}
+								key={`NSTabPage_div_key_${this.props.name}_${index}`}
+								className={`${Styles.ns_tab_content_column} ${tab.classList?.join(" ") ?? ""}`}
+								style={{ ...tab.style, display: index === this.state.activeTabIndex ? "flex" : "none" }}
+							>
+								{
+									this.state.isClicked[index] ? tab.getContent() : <></>
+								}
+							</div>
+						))
+					}
+				</div>
+			</div>
+		);
+	}
 }