namirasoft-site-react 1.4.111 → 1.4.113

package/src/components/NSDialog.module.css

@@ -1,107 +1,107 @@
-.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_center_container> .ns_dialog_content { 
-		left: 0;
-		width: 100%;
-		position: relative;
-	}
-	.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_center_container> .ns_dialog_content { 
+		left: 0;
+		width: 100%;
+		position: relative;
+	}
+	.ns_dialog_content {
+		right: 0;
+	}
 }

package/src/components/NSDialog.tsx

@@ -1,57 +1,57 @@
-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
-				}}
-			>
-				<div
-					onClick={() => props.onClose()}
-					style=
-					{{
-						position: "absolute",
-						top: 0,
-						right: 0,
-						transform: "translate(-40%,40%)",
-						cursor: "pointer",
-						width: "24px",
-						height: "24px",
-					}}
-				>
-					<img
-						src='https://static.namirasoft.com/image/concept/close/blue.svg'
-						alt='close'
-						width={24}
-						height={24}
-						style=
-						{{
-							position: "absolute"
-						}}
-						onClick={() => props.onClose()} />
-				</div>
-				<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
+				}}
+			>
+				<div
+					onClick={() => props.onClose()}
+					style=
+					{{
+						position: "absolute",
+						top: 0,
+						right: 0,
+						transform: "translate(-40%,40%)",
+						cursor: "pointer",
+						width: "24px",
+						height: "24px",
+					}}
+				>
+					<img
+						src='https://static.namirasoft.com/image/concept/close/blue.svg'
+						alt='close'
+						width={24}
+						height={24}
+						style=
+						{{
+							position: "absolute"
+						}}
+						onClick={() => props.onClose()} />
+				</div>
+				<div className={Styles.ns_dialog_children}>
+					{props.children}
+				</div>
+			</div>
+		</section >
+	);
 }

package/src/components/NSDownTimer.module.css

@@ -1,56 +1,56 @@
-.ns_down_timer_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: left;
-}
-
-.ns_figure {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	margin: 0;
-}
-
-.ns_figure figcaption {
-	font-size: 14px;
-	font-weight: 500;
-	margin: 0 0 0 8px;
-	color: #141B5C;
-	padding: 2px 0;
-	max-width: 100px;
-}
-
-.ns_down_timer_time_container {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	gap: 4px;
-	align-items: flex-start;
-	padding: 0 8px;
-}
-
-.ns_down_timer_time_left {
-	font-size: 16px;
-	font-weight: 600;
-	color: #141B5C;
-	margin: 0;
-	padding-left: 2px;
-}
-
-.ns_down_timer_time_left_unit {
-	font-size: 12px;
-	font-weight: 400;
-	color: #141B5C;
-	margin: 0;
-	padding-left: 2px;
-}
-
-.ns_semi_colon {
-	display: flex;
-	flex-direction: row;
-	padding: 0;
-	color: #141B5C;
-	margin: 0;
+.ns_down_timer_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: left;
+}
+
+.ns_figure {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+}
+
+.ns_figure figcaption {
+	font-size: 14px;
+	font-weight: 500;
+	margin: 0 0 0 8px;
+	color: #141B5C;
+	padding: 2px 0;
+	max-width: 100px;
+}
+
+.ns_down_timer_time_container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 4px;
+	align-items: flex-start;
+	padding: 0 8px;
+}
+
+.ns_down_timer_time_left {
+	font-size: 16px;
+	font-weight: 600;
+	color: #141B5C;
+	margin: 0;
+	padding-left: 2px;
+}
+
+.ns_down_timer_time_left_unit {
+	font-size: 12px;
+	font-weight: 400;
+	color: #141B5C;
+	margin: 0;
+	padding-left: 2px;
+}
+
+.ns_semi_colon {
+	display: flex;
+	flex-direction: row;
+	padding: 0;
+	color: #141B5C;
+	margin: 0;
 }

package/src/components/NSDownTimer.tsx

@@ -1,78 +1,78 @@
-import { useEffect, useState } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSDownTimer.module.css';
-export interface NSDownTimerProps extends IBaseComponentProps
-{
-	date: Date;
-	text: string;
-	expire_text?: string
-}
-
-export function NSDownTimer(props: NSDownTimerProps)
-{
-	const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(props.date));
-
-	useEffect(() =>
-	{
-		const timer = setInterval(() =>
-		{
-			setTimeLeft(calculateTimeLeft(props.date));
-		}, 1000);
-		return () => clearInterval(timer);
-	}, [props.date]);
-
-	function calculateTimeLeft(date: Date)
-	{
-		const now = new Date();
-		const difference = date.getTime() - now.getTime();
-
-		let timeLeft: { days?: number; hours?: number; minutes?: number; seconds?: number } = {};
-		if (difference > 0)
-		{
-			timeLeft = {
-				days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-				hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-				minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
-				seconds: Math.floor((difference % (1000 * 60)) / 1000),
-			};
-		}
-		return timeLeft;
-	}
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_down_timer_container} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			<figure className={Styles.ns_figure}>
-				<img
-					src='https://static.namirasoft.com/image/concept/countdown/grey.svg'
-					alt='CountDown'
-					width={48}
-					height={48} />
-				<figcaption>{props.text}</figcaption>
-			</figure>
-			<div className={Styles.ns_down_timer_time_container}>
-				<div className='d-flex flex-column justify-content-center align-items-center'>
-					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.days} `}</span>
-					<span className={Styles.ns_down_timer_time_left_unit}>DAY</span>
-				</div>
-				<span className={`${Styles.ns_semi_colon} `}>:</span>
-				<div className='d-flex flex-column justify-content-center align-items-center'>
-					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.hours}`}</span>
-					<span className={Styles.ns_down_timer_time_left_unit}>HOUR</span>
-				</div>
-				<span className={`${Styles.ns_semi_colon} `}>:</span>
-				<div className='d-flex flex-column justify-content-center align-items-center'>
-					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.minutes}`}</span>
-					<span className={Styles.ns_down_timer_time_left_unit}>MIN</span>
-				</div>
-				<span className={`${Styles.ns_semi_colon} `}>:</span>
-				<div className='d-flex flex-column justify-content-center align-items-center'>
-					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.seconds} `}</span>
-					<span className={Styles.ns_down_timer_time_left_unit}>SEC</span>
-				</div>
-			</div>
-		</div>
-	);
+import { useEffect, useState } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSDownTimer.module.css';
+export interface NSDownTimerProps extends IBaseComponentProps
+{
+	date: Date;
+	text: string;
+	expire_text?: string
+}
+
+export function NSDownTimer(props: NSDownTimerProps)
+{
+	const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(props.date));
+
+	useEffect(() =>
+	{
+		const timer = setInterval(() =>
+		{
+			setTimeLeft(calculateTimeLeft(props.date));
+		}, 1000);
+		return () => clearInterval(timer);
+	}, [props.date]);
+
+	function calculateTimeLeft(date: Date)
+	{
+		const now = new Date();
+		const difference = date.getTime() - now.getTime();
+
+		let timeLeft: { days?: number; hours?: number; minutes?: number; seconds?: number } = {};
+		if (difference > 0)
+		{
+			timeLeft = {
+				days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+				hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+				minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
+				seconds: Math.floor((difference % (1000 * 60)) / 1000),
+			};
+		}
+		return timeLeft;
+	}
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_down_timer_container} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<figure className={Styles.ns_figure}>
+				<img
+					src='https://static.namirasoft.com/image/concept/countdown/grey.svg'
+					alt='CountDown'
+					width={48}
+					height={48} />
+				<figcaption>{props.text}</figcaption>
+			</figure>
+			<div className={Styles.ns_down_timer_time_container}>
+				<div className='d-flex flex-column justify-content-center align-items-center'>
+					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.days} `}</span>
+					<span className={Styles.ns_down_timer_time_left_unit}>DAY</span>
+				</div>
+				<span className={`${Styles.ns_semi_colon} `}>:</span>
+				<div className='d-flex flex-column justify-content-center align-items-center'>
+					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.hours}`}</span>
+					<span className={Styles.ns_down_timer_time_left_unit}>HOUR</span>
+				</div>
+				<span className={`${Styles.ns_semi_colon} `}>:</span>
+				<div className='d-flex flex-column justify-content-center align-items-center'>
+					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.minutes}`}</span>
+					<span className={Styles.ns_down_timer_time_left_unit}>MIN</span>
+				</div>
+				<span className={`${Styles.ns_semi_colon} `}>:</span>
+				<div className='d-flex flex-column justify-content-center align-items-center'>
+					<span className={Styles.ns_down_timer_time_left}>{`${timeLeft.seconds} `}</span>
+					<span className={Styles.ns_down_timer_time_left_unit}>SEC</span>
+				</div>
+			</div>
+		</div>
+	);
 };

package/src/components/NSDownload.module.css

@@ -1,47 +1,47 @@
-.download_parent {
-    padding: 32px 16px;
-}
-
-.download_header {
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 16px;
-}
-
-.radio_group {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.radio_button {
-    background-color: transparent !important;
-    border: none !important;
-    max-width: 97px !important;
-}
-
-.download_detail {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 24px;
-}
-
-.download_button {
-    max-width: unset !important;
-    width: 100% !important;
-}
-
-@media screen and (min-width: 554px) {
-    .download_header {
-        gap: 64px;
-    }
-
-    .download_button {
-        max-width: 272px !important;
-        width: 272px !important;
-    }
+.download_parent {
+    padding: 32px 16px;
+}
+
+.download_header {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+}
+
+.radio_group {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.radio_button {
+    background-color: transparent !important;
+    border: none !important;
+    max-width: 97px !important;
+}
+
+.download_detail {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 24px;
+}
+
+.download_button {
+    max-width: unset !important;
+    width: 100% !important;
+}
+
+@media screen and (min-width: 554px) {
+    .download_header {
+        gap: 64px;
+    }
+
+    .download_button {
+        max-width: 272px !important;
+        width: 272px !important;
+    }
 }