namirasoft-site-react 1.4.35 → 1.4.37

package/src/components/NSCopy.tsx

@@ -1,67 +1,67 @@
-import React, { useRef, useState } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSCopyProps extends IBaseComponentProps
-{
-	children: React.ReactNode;
-}
-export interface NSCopyState
-{
-	copied: boolean;
-}
-
-export function NSCopy(props: NSCopyProps)
-{
-	let NSCopyParent_ref = useRef<HTMLDivElement>(null);
-
-	let [state, setState] = useState<NSCopyState>({
-		copied: false
-	})
-
-	function onCopy(e: React.MouseEvent<HTMLImageElement>): void
-	{
-		e.stopPropagation();
-		setState({ copied: true });
-		setTimeout(() =>
-		{
-			setState({ copied: false });
-		}, 3000);
-
-		if (NSCopyParent_ref.current)
-			navigator.clipboard.writeText(NSCopyParent_ref.current?.innerText);
-	}
-
-	return (
-		<div
-			ref={NSCopyParent_ref}
-			id={props.id}
-			className={`d-flex align-items-center justify-content-center ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			<div>
-				{props.children}
-			</div>
-			{
-				state.copied
-					? <img src={"https://static.namirasoft.com/image/concept/check/on/blue.svg"}
-						alt='Copied'
-						width={23}
-						height={23}
-						style={{
-							marginLeft: "8px"
-						}}
-					/>
-					: <img
-						src='https://static.namirasoft.com/image/concept/copy/blue.svg'
-						alt='Copy_Button'
-						width={16} height={16}
-						onClick={onCopy}
-						style={{
-							cursor: "pointer",
-							marginLeft: "8px"
-						}}
-					/>
-			}
-		</div>
-	);
+import React, { useRef, useState } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSCopyProps extends IBaseComponentProps
+{
+	children: React.ReactNode;
+}
+export interface NSCopyState
+{
+	copied: boolean;
+}
+
+export function NSCopy(props: NSCopyProps)
+{
+	let NSCopyParent_ref = useRef<HTMLDivElement>(null);
+
+	let [state, setState] = useState<NSCopyState>({
+		copied: false
+	})
+
+	function onCopy(e: React.MouseEvent<HTMLImageElement>): void
+	{
+		e.stopPropagation();
+		setState({ copied: true });
+		setTimeout(() =>
+		{
+			setState({ copied: false });
+		}, 3000);
+
+		if (NSCopyParent_ref.current)
+			navigator.clipboard.writeText(NSCopyParent_ref.current?.innerText);
+	}
+
+	return (
+		<div
+			ref={NSCopyParent_ref}
+			id={props.id}
+			className={`d-flex align-items-center justify-content-center ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<div>
+				{props.children}
+			</div>
+			{
+				state.copied
+					? <img src={"https://static.namirasoft.com/image/concept/check/on/blue.svg"}
+						alt='Copied'
+						width={23}
+						height={23}
+						style={{
+							marginLeft: "8px"
+						}}
+					/>
+					: <img
+						src='https://static.namirasoft.com/image/concept/copy/blue.svg'
+						alt='Copy_Button'
+						width={16} height={16}
+						onClick={onCopy}
+						style={{
+							cursor: "pointer",
+							marginLeft: "8px"
+						}}
+					/>
+			}
+		</div>
+	);
 }

package/src/components/NSDeleteDialog.tsx

@@ -1,27 +1,27 @@
-import { NSInfoDialog, NSInfoDialogProps } from './NSInfoDialog';
-import { NSButtonGreen } from "./NSButtonGreen";
-import { NSButtonRed } from "./NSButtonRed";
-import { NSSpace, NSSpaceSizeType } from "./NSSpace";
-
-export interface NSDeleteDialogProps extends NSInfoDialogProps
-{
-    onYes: () => void;
-    onNo: () => void;
-}
-
-export function NSDeleteDialog(props: NSDeleteDialogProps) 
-{
-    return (
-        <NSInfoDialog {...props}
-            onClose={props.onNo}
-        >
-            {props.children}
-			<NSSpace size={NSSpaceSizeType.MINI}></NSSpace>
-			<div>
-                <NSButtonGreen title="Yes" onClick={props.onYes} />
-                <NSSpace size={NSSpaceSizeType.MICRO}></NSSpace>
-                <NSButtonRed title="No" onClick={props.onNo} />
-            </div>
-        </NSInfoDialog>
-    );
+import { NSInfoDialog, NSInfoDialogProps } from './NSInfoDialog';
+import { NSButtonGreen } from "./NSButtonGreen";
+import { NSButtonRed } from "./NSButtonRed";
+import { NSSpace, NSSpaceSizeType } from "./NSSpace";
+
+export interface NSDeleteDialogProps extends NSInfoDialogProps
+{
+    onYes: () => void;
+    onNo: () => void;
+}
+
+export function NSDeleteDialog(props: NSDeleteDialogProps) 
+{
+    return (
+        <NSInfoDialog {...props}
+            onClose={props.onNo}
+        >
+            {props.children}
+			<NSSpace size={NSSpaceSizeType.MINI}></NSSpace>
+			<div>
+                <NSButtonGreen title="Yes" onClick={props.onYes} />
+                <NSSpace size={NSSpaceSizeType.MICRO}></NSSpace>
+                <NSButtonRed title="No" onClick={props.onNo} />
+            </div>
+        </NSInfoDialog>
+    );
 }

package/src/components/NSDialog.module.css

@@ -1,103 +1,103 @@
-.ns_dialog_container {
-	background-color: #00000080;
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	z-index: 99;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_dialog_center_container {
-	background-color: #00000080;
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	z-index: 99;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_dialog_background {
-	background-color: #00000080;
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	z-index: 99;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_dialog_content {
-	border: 8px solid rgb(233, 232, 232);
-	border-radius: 24px;
-	background-color: white;
-	z-index: 100;
-	min-width: 350px;
-	max-width: 992px;
-	min-height: 150px;
-	padding: 8px 0;
-	position: absolute;
-	color: black;
-	cursor: default;
-}
-
-.ns_dialog_children {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 16px;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_dialog_container {
-		background-color: none;
-		position: relative;
-		display: unset;
-	}
-
-	.ns_dialog_background {
-		background-color: #00000080;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 99;
-	}
-
-	.ns_dialog_center_container {
-		background-color: #00000080;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		z-index: 99;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.ns_dialog_content {
-		right: 0;
-	}
+.ns_dialog_container {
+	background-color: #00000080;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 99;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_dialog_center_container {
+	background-color: #00000080;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 99;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_dialog_background {
+	background-color: #00000080;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 99;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_dialog_content {
+	border: 8px solid rgb(233, 232, 232);
+	border-radius: 24px;
+	background-color: white;
+	z-index: 100;
+	min-width: 350px;
+	max-width: 992px;
+	min-height: 150px;
+	padding: 8px 0;
+	position: absolute;
+	color: black;
+	cursor: default;
+}
+
+.ns_dialog_children {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 16px;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_dialog_container {
+		background-color: none;
+		position: relative;
+		display: unset;
+	}
+
+	.ns_dialog_background {
+		background-color: #00000080;
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 99;
+	}
+
+	.ns_dialog_center_container {
+		background-color: #00000080;
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		z-index: 99;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.ns_dialog_content {
+		right: 0;
+	}
 }

package/src/components/NSDialog.tsx

@@ -1,48 +1,48 @@
-import { ReactNode } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSDialog.module.css';
-
-export interface NSDialogProps extends IBaseComponentProps
-{
-	onClose: () => void;
-	children: ReactNode;
-	center_dialog?: boolean;
-}
-
-export function NSDialog(props: NSDialogProps)
-{
-	return (
-		<section
-			id={props.id}
-			className={props.center_dialog ? Styles.ns_dialog_center_container : Styles.ns_dialog_container}
-			>
-			
-			<div className={Styles.ns_dialog_background} onClick={() => props.onClose()}>
-			</div>
-			<div
-				className={`${Styles.ns_dialog_content} ${props.classList?.join(" ")}`}
-				style={{
-					...props.style
-				}}
-			>
-				<img
-					src='https://static.namirasoft.com/image/concept/close/blue.svg'
-					alt=''
-					width={24}
-					height={24}
-					style=
-					{{
-						position: "absolute",
-						top: 0,
-						right: 0,
-						transform: "translate(-40%,40%)",
-						cursor: "pointer"
-					}}
-					onClick={() => props.onClose()} />
-				<div className={Styles.ns_dialog_children}>
-					{props.children}
-				</div>
-			</div>
-		</section >
-	);
+import { ReactNode } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSDialog.module.css';
+
+export interface NSDialogProps extends IBaseComponentProps
+{
+	onClose: () => void;
+	children: ReactNode;
+	center_dialog?: boolean;
+}
+
+export function NSDialog(props: NSDialogProps)
+{
+	return (
+		<section
+			id={props.id}
+			className={props.center_dialog ? Styles.ns_dialog_center_container : Styles.ns_dialog_container}
+			>
+			
+			<div className={Styles.ns_dialog_background} onClick={() => props.onClose()}>
+			</div>
+			<div
+				className={`${Styles.ns_dialog_content} ${props.classList?.join(" ")}`}
+				style={{
+					...props.style
+				}}
+			>
+				<img
+					src='https://static.namirasoft.com/image/concept/close/blue.svg'
+					alt=''
+					width={24}
+					height={24}
+					style=
+					{{
+						position: "absolute",
+						top: 0,
+						right: 0,
+						transform: "translate(-40%,40%)",
+						cursor: "pointer"
+					}}
+					onClick={() => props.onClose()} />
+				<div className={Styles.ns_dialog_children}>
+					{props.children}
+				</div>
+			</div>
+		</section >
+	);
 }

package/src/components/NSDownTimer.module.css

@@ -1,63 +1,63 @@
-.ns_payment_time {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: left;
-}
-
-.ns_payment_time span {
-    color: #141B5C;
-    font-size: 6px;
-    margin: 0;
-    padding-left: 2px;
-}
-
-.ns_payment_time_countdown {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 4px;
-    align-items: flex-start;
-    padding: 0 8px;
-}
-
-.ns_semi_colon {
-    display: flex;
-    flex-direction: row;
-    padding: 0;
-}
-
-.ns_payment_time_countdown Span {
-    font-size: 16px;
-    font-weight: 400;
-    color: #141B5C;
-}
-
-.ns_payment_expires_time {
-    font-size: 12px;
-    margin: 0;
-    color: #141B5C;
-    padding: 2px 0;
-    text-align: center;
-}
-
-.ns_figure {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-}
-
-.ns_figure figcaption {
-    font-size: 20px;
-    font-weight: 500;
-    margin: 0;
-    color: #141B5C;
-    padding: 2px 0;
-    max-width: 100px;
-}
-
-.ns_date {
-    font-size: 48px;
+.ns_payment_time {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+}
+
+.ns_payment_time span {
+    color: #141B5C;
+    font-size: 6px;
+    margin: 0;
+    padding-left: 2px;
+}
+
+.ns_payment_time_countdown {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 4px;
+    align-items: flex-start;
+    padding: 0 8px;
+}
+
+.ns_semi_colon {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+}
+
+.ns_payment_time_countdown Span {
+    font-size: 16px;
+    font-weight: 400;
+    color: #141B5C;
+}
+
+.ns_payment_expires_time {
+    font-size: 12px;
+    margin: 0;
+    color: #141B5C;
+    padding: 2px 0;
+    text-align: center;
+}
+
+.ns_figure {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+}
+
+.ns_figure figcaption {
+    font-size: 20px;
+    font-weight: 500;
+    margin: 0;
+    color: #141B5C;
+    padding: 2px 0;
+    max-width: 100px;
+}
+
+.ns_date {
+    font-size: 48px;
 }