namirasoft-site-react 1.4.133 → 1.4.134

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;
+    }
 }

package/src/components/NSDownload.tsx

@@ -1,63 +1,64 @@
-import { useState } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSBoxRadio } from "./NSBoxRadio";
-import { NSLine } from "./NSLine";
-import { NSButtonBlue } from "./NSButtonBlue";
-import Styles from "./NSDownload.module.css"
-
-export interface NSDownloadProps extends IBaseComponentProps
-{
-	releaseDate: string;
-}
-
-export function NSDownload(props: NSDownloadProps)
-{
-	const [state, setState] = useState("32-bit");
-
-	return (
-		<div className={`${Styles.download_parent} ${props.classList?.join(' ')}`}>
-			<div className={Styles.download_header}>
-				<h3 style={{ color: "#141B5C" }}>Choose Your Windows Architecture</h3>
-				<div className={Styles.radio_group}>
-					<NSBoxRadio
-						title={"32-bit"}
-						required={false}
-						isSelected={state === "32-bit"}
-						onChanged={(event) =>
-						{
-							let value = event.getValue();
-							if (value)
-							{
-								setState("32-bit");
-							}
-						}}
-						classList={[Styles.radio_button]}
-					/>
-					<NSBoxRadio
-						title={"64-bit"}
-						required={false}
-						isSelected={state === "64-bit"}
-						onChanged={(event) =>
-						{
-							let value = event.getValue();
-							if (value)
-							{
-								setState("64-bit");
-							}
-						}}
-						classList={[Styles.radio_button]}
-					/>
-				</div>
-			</div>
-			<NSLine />
-			<div className={Styles.download_detail}>
-				<h4 style={{ color: "#141B5C" }}>For Windows 7 and higher, Windows Server 2008 R2 and higher.</h4>
-				<div style={{ color: "#141B5C" }}>
-					<p style={{ marginBottom: "0" }}>Latest Version</p>
-					<p style={{ marginBottom: "0" }}>Release Date: {props.releaseDate}</p>
-				</div>
-				<NSButtonBlue title="Download" onClick={() => { }} classList={[Styles.download_button]} />
-			</div>
-		</div>
-	);
+// todo move to its own probject: I guess this is Timify
+import { useState } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSBoxRadio } from "./NSBoxRadio";
+import { NSLine } from "./NSLine";
+import { NSButtonBlue } from "./NSButtonBlue";
+import Styles from "./NSDownload.module.css"
+
+export interface NSDownloadProps extends IBaseComponentProps
+{
+	releaseDate: string;
+}
+
+export function NSDownload(props: NSDownloadProps)
+{
+	const [state, setState] = useState("32-bit");
+
+	return (
+		<div className={`${Styles.download_parent} ${props.classList?.join(' ')}`}>
+			<div className={Styles.download_header}>
+				<h3 style={{ color: "#141B5C" }}>Choose Your Windows Architecture</h3>
+				<div className={Styles.radio_group}>
+					<NSBoxRadio
+						title={"32-bit"}
+						required={false}
+						isSelected={state === "32-bit"}
+						onChanged={(event) =>
+						{
+							let value = event.getValue();
+							if (value)
+							{
+								setState("32-bit");
+							}
+						}}
+						classList={[Styles.radio_button]}
+					/>
+					<NSBoxRadio
+						title={"64-bit"}
+						required={false}
+						isSelected={state === "64-bit"}
+						onChanged={(event) =>
+						{
+							let value = event.getValue();
+							if (value)
+							{
+								setState("64-bit");
+							}
+						}}
+						classList={[Styles.radio_button]}
+					/>
+				</div>
+			</div>
+			<NSLine />
+			<div className={Styles.download_detail}>
+				<h4 style={{ color: "#141B5C" }}>For Windows 7 and higher, Windows Server 2008 R2 and higher.</h4>
+				<div style={{ color: "#141B5C" }}>
+					<p style={{ marginBottom: "0" }}>Latest Version</p>
+					<p style={{ marginBottom: "0" }}>Release Date: {props.releaseDate}</p>
+				</div>
+				<NSButtonBlue title="Download" onClick={() => { }} classList={[Styles.download_button]} />
+			</div>
+		</div>
+	);
 };

package/src/components/NSElectronicCard.module.css

@@ -1,61 +1,61 @@
-.ns_border {
-    width: 358px;
-    height: fit-content;
-    border: 1px solid rgba(161, 164, 176, 1);
-    border-radius: 8px;
-    background-color: rgba(255, 255, 255, 1);
-}
-
-.ns_image_text {
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.ns_information {
-    display: flex;
-    flex-direction: column;
-    padding-left: 16px;
-    gap: 8px;
-}
-
-.ns_card_items {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 16px;
-}
-
-.ns_right_card_items {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-}
-
-.ns_electronic_card h4 {
-    color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0;
-}
-
-.ns_electronic_card h5 {
-    color: rgba(20, 27, 92, 1);
-    font-size: 12px;
-    font-weight: 700;
-    margin: 0;
-}
-
-.ns_electronic_card a {
-    text-decoration: none;
-    cursor: pointer;
-    color: rgba(20, 27, 92, 1);
-}
-
-.ns_line {
-    margin: 0 16px;
-    border: 1px solid linear-gradient(to right, rgba(47, 0, 236, 0.6), rgba(118, 255, 181, 0.42));
-    background: linear-gradient(to right, rgba(47, 0, 236, 0.6), rgba(118, 255, 181, 0.42));
-    height: 2px;
+.ns_border {
+    width: 358px;
+    height: fit-content;
+    border: 1px solid rgba(161, 164, 176, 1);
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.ns_image_text {
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.ns_information {
+    display: flex;
+    flex-direction: column;
+    padding-left: 16px;
+    gap: 8px;
+}
+
+.ns_card_items {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 16px;
+}
+
+.ns_right_card_items {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+}
+
+.ns_electronic_card h4 {
+    color: rgba(20, 27, 92, 1);
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.ns_electronic_card h5 {
+    color: rgba(20, 27, 92, 1);
+    font-size: 12px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.ns_electronic_card a {
+    text-decoration: none;
+    cursor: pointer;
+    color: rgba(20, 27, 92, 1);
+}
+
+.ns_line {
+    margin: 0 16px;
+    border: 1px solid linear-gradient(to right, rgba(47, 0, 236, 0.6), rgba(118, 255, 181, 0.42));
+    background: linear-gradient(to right, rgba(47, 0, 236, 0.6), rgba(118, 255, 181, 0.42));
+    height: 2px;
 }

package/src/components/NSElectronicCard.tsx

@@ -1,46 +1,47 @@
-import { useState } from 'react';
-import Styles from './NSElectronicCard.module.css';
-export interface INSElectronicCardProps
-{
-    src: string;
-    title: string | number;
-    cardNumber: string;
-    info?: string;
-    alt?: string;
-}
-export function NSElectronicCard(props: INSElectronicCardProps)
-{
-    if (props.cardNumber.length < 15)
-    {
-        alert("Please enter 16 number at least")
-    }
-    let last4Number = props.cardNumber.substr(-4);
-    let [cardNumber, setCardNumber] = useState("");
-    return (
-        <section className={Styles.ns_electronic_card}>
-            <div className={Styles.ns_border}>
-                <div className={Styles.ns_image_text}>
-                    <img
-                        src={props.src}
-                        width={68}
-                        height={48}
-                        alt={props.alt ? props.alt : "E-Card Image"}
-                    />
-                    <div className={Styles.ns_information}>
-                        <h4>{props.title}</h4>
-                        <h5>{`0000 0000 0000 ${props.cardNumber ? last4Number : cardNumber}`}</h5>
-                    </div>
-                </div>
-                <hr className={Styles.ns_line}></hr>
-                <div className={Styles.ns_card_items}>
-                    <a href='#'><h4 style={{ color: "rgba(3, 119, 255, 1)" }}>{props.info}</h4></a>
-                    <div className={Styles.ns_right_card_items}>
-                        <a href='#'><h4 onClick={() => setCardNumber("0000")}>Default</h4></a>
-                        <a href='#'><h4 onClick={() => setCardNumber("0000")}>Remove</h4></a>
-                        <a href='#'><h4>Edit</h4></a>
-                    </div>
-                </div>
-            </div>
-        </section >
-    );
+// todo move to its own probject: It's for Payment to add credit card
+import { useState } from 'react';
+import Styles from './NSElectronicCard.module.css';
+export interface NSElectronicCardProps
+{
+    src: string;
+    title: string | number;
+    cardNumber: string;
+    info?: string;
+    alt?: string;
+}
+export function NSElectronicCard(props: NSElectronicCardProps)
+{
+    if (props.cardNumber.length < 15)
+    {
+        alert("Please enter 16 number at least")
+    }
+    let last4Number = props.cardNumber.substr(-4);
+    let [cardNumber, setCardNumber] = useState("");
+    return (
+        <section className={Styles.ns_electronic_card}>
+            <div className={Styles.ns_border}>
+                <div className={Styles.ns_image_text}>
+                    <img
+                        src={props.src}
+                        width={68}
+                        height={48}
+                        alt={props.alt ? props.alt : "E-Card Image"}
+                    />
+                    <div className={Styles.ns_information}>
+                        <h4>{props.title}</h4>
+                        <h5>{`0000 0000 0000 ${props.cardNumber ? last4Number : cardNumber}`}</h5>
+                    </div>
+                </div>
+                <hr className={Styles.ns_line}></hr>
+                <div className={Styles.ns_card_items}>
+                    <a href='#'><h4 style={{ color: "rgba(3, 119, 255, 1)" }}>{props.info}</h4></a>
+                    <div className={Styles.ns_right_card_items}>
+                        <a href='#'><h4 onClick={() => setCardNumber("0000")}>Default</h4></a>
+                        <a href='#'><h4 onClick={() => setCardNumber("0000")}>Remove</h4></a>
+                        <a href='#'><h4>Edit</h4></a>
+                    </div>
+                </div>
+            </div>
+        </section >
+    );
 }

package/src/components/NSEntityCardBackground.module.css

@@ -1,28 +1,28 @@
-.card_background {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-	justify-content: flex-end;
-	box-shadow: 0 2px 10px 4px #00000040;
-	padding: 24px;
-	border-radius: 24px;
-	width: 100%;
-	max-width: 304px;
-	position: relative;
-	color: #fff;
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
-	min-height: 216px;
-}
-
-.card_background_text {
-	font-size: 16px;
-	font-weight: 400;
-	line-height: inherit;
-	font-family: inherit;
-}
-
-.ns_card_link_container {
-	width: 100%;
+.card_background {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	justify-content: flex-end;
+	box-shadow: 0 2px 10px 4px #00000040;
+	padding: 24px;
+	border-radius: 24px;
+	width: 100%;
+	max-width: 304px;
+	position: relative;
+	color: #fff;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	min-height: 216px;
+}
+
+.card_background_text {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: inherit;
+	font-family: inherit;
+}
+
+.ns_card_link_container {
+	width: 100%;
 }