namirasoft-site-react 1.3.229 → 1.3.232

package/src/components/NSLink.tsx

@@ -1,26 +1,26 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from "../props/ILinkProps";
-import Styles from "./NSLink.module.css";
-
-export interface INSILinkProps extends ILinkProps, IBaseComponentProps
-{
-}
-
-export function NSLink(props: INSILinkProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_link_parent} ${props.classList?.join(" ")}`}
-		>
-			<a
-				className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`}
-				href={props.href}
-				target={props?.target ?? "_self"}
-				style={props.style}
-			>
-				{props.title}
-			</a>
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from "../props/ILinkProps";
+import Styles from "./NSLink.module.css";
+
+export interface INSILinkProps extends ILinkProps, IBaseComponentProps
+{
+}
+
+export function NSLink(props: INSILinkProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_link_parent} ${props.classList?.join(" ")}`}
+		>
+			<a
+				className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`}
+				href={props.href}
+				target={props?.target ?? "_self"}
+				style={props.style}
+			>
+				{props.title}
+			</a>
+		</div>
+	);
 }

package/src/components/NSLinkBlue.tsx

@@ -1,21 +1,21 @@
-import { NSLink, INSILinkProps } from "./NSLink";
-
-export function NSLinkBlue(props: INSILinkProps)
-{
-	return (
-		<NSLink
-			id={props.id}
-			style=
-			{{
-				color: "#fff",
-				border: "none",
-				backgroundColor: "rgba(3, 119, 255, 1)",
-				width: "358px",
-				height: "48px",
-				boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
-			}}
-			title={props.title}
-			href={props.href}
-			target={props.target}
-		/>);
+import { NSLink, INSILinkProps } from "./NSLink";
+
+export function NSLinkBlue(props: INSILinkProps)
+{
+	return (
+		<NSLink
+			id={props.id}
+			style=
+			{{
+				color: "#fff",
+				border: "none",
+				backgroundColor: "rgba(3, 119, 255, 1)",
+				width: "358px",
+				height: "48px",
+				boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
+			}}
+			title={props.title}
+			href={props.href}
+			target={props.target}
+		/>);
 }

package/src/components/NSLinkGreen.tsx

@@ -1,6 +1,6 @@
-import { NSLink, INSILinkProps } from "./NSLink";
-
-export function NSLinkGreen(props: INSILinkProps)
-{
-    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "#06D182" }} title={props.title} href={props.href} target={props.target} />;
+import { NSLink, INSILinkProps } from "./NSLink";
+
+export function NSLinkGreen(props: INSILinkProps)
+{
+    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,6 +1,6 @@
-import { NSLink, INSILinkProps } from "./NSLink";
-
-export function NSLinkRed(props: INSILinkProps)
-{
-    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} />;
+import { NSLink, INSILinkProps } from "./NSLink";
+
+export function NSLinkRed(props: INSILinkProps)
+{
+    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/NSLoading.module.css

@@ -1,30 +1,30 @@
-.ns_loading_parent {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 0 auto;
-	padding: 48px 0;
-}
-
-.ns_loader {
-	margin: 16px 0;
-	width: 75px;
-	height: 75px;
-	border-radius: 50%;
-	padding: 1px;
-	background: conic-gradient(#0000 10%, #001664) content-box;
-	-webkit-mask:
-		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
-		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
-	-webkit-mask-composite: destination-in;
-	mask-composite: intersect;
-	animation: s4 1s infinite steps(10);
-}
-
-@keyframes s4 {
-	to {
-		transform: rotate(1turn)
-	}
+.ns_loading_parent {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+	padding: 48px 0;
+}
+
+.ns_loader {
+	margin: 16px 0;
+	width: 75px;
+	height: 75px;
+	border-radius: 50%;
+	padding: 1px;
+	background: conic-gradient(#0000 10%, #001664) content-box;
+	-webkit-mask:
+		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
+		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+	-webkit-mask-composite: destination-in;
+	mask-composite: intersect;
+	animation: s4 1s infinite steps(10);
+}
+
+@keyframes s4 {
+	to {
+		transform: rotate(1turn)
+	}
 }

package/src/components/NSLoading.tsx

@@ -1,20 +1,20 @@
-import Styles from './NSLoading.module.css';
-import { NSSection } from './NSSection';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSLoadingProps extends IBaseComponentProps
-{
-}
-
-export function NSLoading(props: INSLoadingProps)
-{
-	return (
-		<NSSection {...props}>
-			<div className={Styles.ns_loading_parent}>
-				<h5>Loading</h5>
-				<div className={Styles.ns_loader}></div>
-				<p>Please wait ...</p>
-			</div>
-		</NSSection>
-	);
+import Styles from './NSLoading.module.css';
+import { NSSection } from './NSSection';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSLoadingProps extends IBaseComponentProps
+{
+}
+
+export function NSLoading(props: INSLoadingProps)
+{
+	return (
+		<NSSection {...props}>
+			<div className={Styles.ns_loading_parent}>
+				<h5>Loading</h5>
+				<div className={Styles.ns_loader}></div>
+				<p>Please wait ...</p>
+			</div>
+		</NSSection>
+	);
 }

package/src/components/NSModal.module.css

@@ -1,71 +1,71 @@
-/* Modal */
-.ns_modal {
-	position: fixed;
-	margin: 0 16px;
-	z-index: 10;
-	color: rgba(20, 27, 92, 1);
-	width: 100%;
-	height: 100%;
-	right: 0;
-	background-color: rgba(0, 0, 0, 0.8);
-	top: 0;
-	right: 0;
-	left: 0;
-	margin: 0;
-	display: none;
-	justify-content: center;
-	align-items: center;
-	z-index: 99;
-	text-align: center;
-	padding: 0 12px;
-}
-
-.ns_modal_container {
-	background-color: #fff;
-	width: 100%;
-	max-width: 600px;
-	position: relative;
-	border-radius: 8px;
-	border-radius: 8px;
-	padding: 24px;
-}
-
-.ns_close_modal {
-	border: none;
-	position: absolute;
-	right: 24px;
-	margin: 0;
-	top: 24px;
-	width: 24px;
-	height: 24px;
-	background-color: rgb(0, 0, 0);
-	border-radius: 50%;
-}
-
-.ns_close_modal img {
-	width: 12px;
-	height: 12px;
-}
-
-.ns_modal_content {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-}
-
-.ns_show {
-	display: flex;
-}
-
-.ns_hide {
-	display: none;
-}
-
-
-@media screen and (min-width: 554px) {
-	.ns_modal {
-		padding: 0;
-	}
+/* Modal */
+.ns_modal {
+	position: fixed;
+	margin: 0 16px;
+	z-index: 10;
+	color: rgba(20, 27, 92, 1);
+	width: 100%;
+	height: 100%;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.8);
+	top: 0;
+	right: 0;
+	left: 0;
+	margin: 0;
+	display: none;
+	justify-content: center;
+	align-items: center;
+	z-index: 99;
+	text-align: center;
+	padding: 0 12px;
+}
+
+.ns_modal_container {
+	background-color: #fff;
+	width: 100%;
+	max-width: 600px;
+	position: relative;
+	border-radius: 8px;
+	border-radius: 8px;
+	padding: 24px;
+}
+
+.ns_close_modal {
+	border: none;
+	position: absolute;
+	right: 24px;
+	margin: 0;
+	top: 24px;
+	width: 24px;
+	height: 24px;
+	background-color: rgb(0, 0, 0);
+	border-radius: 50%;
+}
+
+.ns_close_modal img {
+	width: 12px;
+	height: 12px;
+}
+
+.ns_modal_content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.ns_show {
+	display: flex;
+}
+
+.ns_hide {
+	display: none;
+}
+
+
+@media screen and (min-width: 554px) {
+	.ns_modal {
+		padding: 0;
+	}
 }

package/src/components/NSModal.tsx

@@ -1,63 +1,65 @@
-import { IBaseComponentProps, NSSpace, NSSpaceSizeType, NSTitle } from "../main";
-import Styles from './NSModal.module.css';
-import NSButton from "./NSButton";
-export interface INSModalProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: string;
-	show: boolean;
-	column?: string;
-	children?: React.ReactNode;
-	onClose: () => void;
-}
-export function NSModal(props: INSModalProps)
-{
-	const handleModalClick = (event: React.MouseEvent) =>
-	{
-		event.stopPropagation();
-	};
-	return (
-		<div onClick={props.onClose}>
-			<section
-				id={props.id}
-				className={`${props.show ? Styles.ns_show : Styles.ns_hide}
-					${Styles.ns_modal} 
-					${props.classList?.join(" ")}`}
-				style={props.style}
-				onClick={props.onClose}
-			>
-				<div className={Styles.ns_modal_container} onClick={handleModalClick}>
-					<NSButton
-						onClick={props.onClose}
-						icon={{ src: "https://static.namirasoft.com/image/concept/close/white.svg", alt: "close modal" }}
-						classList={[Styles.ns_close_modal]}
-					/>
-					<div className={Styles.ns_modal_content}>
-						{props.column && (
-							<>
-								<NSTitle title={props.column} />
-								<NSSpace size={NSSpaceSizeType.NORMAL} />
-							</>
-						)}
-						{props.title && (
-							<>
-								<NSTitle title={props.title} style={{marginBottom : "0"}}/>
-								<NSSpace size={NSSpaceSizeType.NORMAL} />
-							</>
-						)}
-						{props.description && (
-							<div>
-								<p style={{ marginBottom: "0" }} className={Styles.ns_modal_description}>{props.description}</p>
-							</div>
-						)}
-						{props.children && (
-							<div>
-								{props.children}
-							</div>
-						)}
-					</div>
-				</div>
-			</section>
-		</div>
-	);
+import { IBaseComponentProps, NSSpace, NSSpaceSizeType, NSTitle } from "../main";
+import Styles from './NSModal.module.css';
+import NSButton from "./NSButton";
+export interface INSModalProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: string;
+	show: boolean;
+	column?: string;
+	children?: React.ReactNode;
+	onClose: () => void;
+}
+export function NSModal(props: INSModalProps)
+{
+	const handleModalClick = (event: React.MouseEvent) =>
+	{
+		event.stopPropagation();
+	};
+	return (
+		<div onClick={props.onClose}>
+			<section
+				id={props.id}
+				className={`${props.show ? Styles.ns_show : Styles.ns_hide}
+					${Styles.ns_modal} 
+					${props.classList?.join(" ")}`}
+				style={props.style}
+				onClick={props.onClose}
+			>
+				<div className={Styles.ns_modal_container} onClick={handleModalClick}>
+					<NSButton
+						onClick={props.onClose}
+						icon={{ src: "https://static.namirasoft.com/image/concept/close/white.svg", alt: "close modal" }}
+						classList={[Styles.ns_close_modal]}
+					/>
+					<div className={Styles.ns_modal_content}>
+						{props.column && (
+							<>
+								<NSTitle title={props.column} />
+								<p>1</p>
+								<NSSpace size={NSSpaceSizeType.NORMAL} />
+							</>
+						)}
+						{props.title && (
+							<>
+								<NSTitle title={props.title} style={{marginBottom : "0"}}/>
+								<p>2</p>
+								<NSSpace size={NSSpaceSizeType.NORMAL} />
+							</>
+						)}
+						{props.description && (
+							<div>
+								<p style={{ marginBottom: "0" }} className={Styles.ns_modal_description}>{props.description}</p>
+							</div>
+						)}
+						{props.children && (
+							<div>
+								{props.children}
+							</div>
+						)}
+					</div>
+				</div>
+			</section>
+		</div>
+	);
 }

package/src/components/NSPagination.module.css

@@ -1,83 +1,83 @@
-.ns_pagination_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	gap: 20px;
-	text-align: left;
-	font-size: 14px;
-	justify-items: center;
-	width: 100%;
-	max-width: max-content;
-
-}
-
-.ns_select_number_parent {
-	font-weight: 500;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_paginate_link {
-	color: rgba(20, 27, 92, 1);
-	text-decoration: none;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 22px;
-	font-family: inherit;
-}
-
-.ns_select_number {
-	color: rgba(20, 27, 92, 1);
-	font-weight: 500;
-	background-color: rgb(255, 255, 255);
-	border: 2px solid rgba(20, 27, 92, 1);
-	border-radius: 50px;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_pagination_left_ellipses {
-	padding-bottom: 10px;
-}
-
-.ns_pagination_left_ellipses a {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.ns_pagination_right_ellipses {
-	padding-bottom: 10px;
-}
-
-.ns_pagination_right_ellipses a {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.ns_pagination_info {
-	background-color: rgb(255, 255, 255);
-	color: rgba(20, 27, 92, 0.5);
-	width: 250px;
-	padding-left: 16px 48px;
-	text-align: center;
-	border-radius: 8px;
-	margin-left: 48px;
-}
-
-.ns_pagination_info h6 {
-	padding: 8px 0;
-	margin: 0;
+.ns_pagination_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20px;
+	text-align: left;
+	font-size: 14px;
+	justify-items: center;
+	width: 100%;
+	max-width: max-content;
+
+}
+
+.ns_select_number_parent {
+	font-weight: 500;
+	border-radius: 50px;
+	height: 32px;
+	width: 32px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_paginate_link {
+	color: rgba(20, 27, 92, 1);
+	text-decoration: none;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+	font-family: inherit;
+}
+
+.ns_select_number {
+	color: rgba(20, 27, 92, 1);
+	font-weight: 500;
+	background-color: rgb(255, 255, 255);
+	border: 2px solid rgba(20, 27, 92, 1);
+	border-radius: 50px;
+	border-radius: 50px;
+	height: 32px;
+	width: 32px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_pagination_left_ellipses {
+	padding-bottom: 10px;
+}
+
+.ns_pagination_left_ellipses a {
+	color: rgba(20, 27, 92, 1);
+	font-size: 24px;
+	font-weight: 700;
+}
+
+.ns_pagination_right_ellipses {
+	padding-bottom: 10px;
+}
+
+.ns_pagination_right_ellipses a {
+	color: rgba(20, 27, 92, 1);
+	font-size: 24px;
+	font-weight: 700;
+}
+
+.ns_pagination_info {
+	background-color: rgb(255, 255, 255);
+	color: rgba(20, 27, 92, 0.5);
+	width: 250px;
+	padding-left: 16px 48px;
+	text-align: center;
+	border-radius: 8px;
+	margin-left: 48px;
+}
+
+.ns_pagination_info h6 {
+	padding: 8px 0;
+	margin: 0;
 }