namirasoft-site-react 1.3.396 → 1.3.398

package/src/components/NSCard.tsx

@@ -1,72 +1,72 @@
-import Styles from './NSCard.module.css'
-import { NSLinkBlue } from './NSLinkBlue';
-import { ILinkProps } from '../props/ILinkProps';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IImageProps } from '../props/IImageProps';
-
-export interface INSCardProps extends IBaseComponentProps
-{
-	title?: string;
-	headline?: {
-		color?: string;
-		text: string;
-	}
-	description?: string;
-	image: IImageProps;
-	link: ILinkProps;
-}
-
-export function NSCard(props: INSCardProps)
-{
-	return (
-		<a href={props.link.href} id={props.id}
-			className={`${Styles.ns_card} ${props.classList?.join(" ")}`}
-			style={props.style}
-			target='_blank'
-			rel="noreferrer"
-		>
-			<div className={Styles.ns_card_detail_container}>
-				<div className={Styles.ns_card_title_img}
-					style={{
-						alignItems: props.description ? "flex-start" : "center",
-					}}
-				>
-					<img className={Styles.ns_card_img} alt='Card' {...props.image} />
-					{props.headline &&
-						<span className={Styles.ns_card_headline} style={{ color: props.headline?.color }}> {props.headline.text} </span>
-					}
-					<h3 className={Styles.ns_card_title}>
-						{props.title}
-					</h3>
-				</div>
-				{
-					props.description &&
-					<p className={Styles.ns_card_description}>
-						{props.description}
-					</p>
-				}
-			</div>
-			{
-				props.link ?
-					props.link.title ?
-						<div className={Styles.ns_card_link_container}>
-							<NSLinkBlue
-								title={props.link.title}
-								href={props.link.href}
-								target={props.link.target}
-								style={{ marginTop: "24px" }}
-							/>
-						</div>
-						:
-						<div className={Styles.ns_card_link_container}>
-							<NSLinkBlue
-								href={props.link.href}
-								target={props.link.target}
-							/>
-						</div>
-					:
-					<div></div>
-			}
-		</a >
-	);
+import Styles from './NSCard.module.css'
+import { NSLinkBlue } from './NSLinkBlue';
+import { ILinkProps } from '../props/ILinkProps';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IImageProps } from '../props/IImageProps';
+
+export interface INSCardProps extends IBaseComponentProps
+{
+	title?: string;
+	headline?: {
+		color?: string;
+		text: string;
+	}
+	description?: string;
+	image: IImageProps;
+	link: ILinkProps;
+}
+
+export function NSCard(props: INSCardProps)
+{
+	return (
+		<a href={props.link.href} id={props.id}
+			className={`${Styles.ns_card} ${props.classList?.join(" ")}`}
+			style={props.style}
+			target='_blank'
+			rel="noreferrer"
+		>
+			<div className={Styles.ns_card_detail_container}>
+				<div className={Styles.ns_card_title_img}
+					style={{
+						alignItems: props.description ? "flex-start" : "center",
+					}}
+				>
+					<img className={Styles.ns_card_img} alt='Card' {...props.image} />
+					{props.headline &&
+						<span className={Styles.ns_card_headline} style={{ color: props.headline?.color }}> {props.headline.text} </span>
+					}
+					<h3 className={Styles.ns_card_title}>
+						{props.title}
+					</h3>
+				</div>
+				{
+					props.description &&
+					<p className={Styles.ns_card_description}>
+						{props.description}
+					</p>
+				}
+			</div>
+			{
+				props.link ?
+					props.link.title ?
+						<div className={Styles.ns_card_link_container}>
+							<NSLinkBlue
+								title={props.link.title}
+								href={props.link.href}
+								target={props.link.target}
+								style={{ marginTop: "24px" }}
+							/>
+						</div>
+						:
+						<div className={Styles.ns_card_link_container}>
+							<NSLinkBlue
+								href={props.link.href}
+								target={props.link.target}
+							/>
+						</div>
+					:
+					<div></div>
+			}
+		</a >
+	);
 }

package/src/components/NSCopyToClipboard.module.css

@@ -1,40 +1,40 @@
-.ns_copy_to_clipboard {
-    display: flex;
-    flex-direction: column;
-    width: 416px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-    margin: 0 auto;
-}
-
-.ns_copy_to_clipboard_value {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-    text-align: center;
-    overflow: hidden;
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    border-radius: 8px;
-    border: 1px solid rgba(161, 164, 176, 1);
-    background-color: #fff;
-}
-
-.ns_copy_to_clipboard_value p {
-    color: rgba(20, 27, 92, 1);
-    width: 100%;
-    display: inline-block;
-    overflow: hidden;
-    word-wrap: break-word;
-}
-
-.ns_copy_to_clipboard_title {
-    font-size: 24px;
-    font-weight: 700;
-    color: rgba(20, 27, 92, 1);
-    text-align: center;
-    margin-bottom: 16px;
+.ns_copy_to_clipboard {
+    display: flex;
+    flex-direction: column;
+    width: 416px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.ns_copy_to_clipboard_value {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    overflow: hidden;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid rgba(161, 164, 176, 1);
+    background-color: #fff;
+}
+
+.ns_copy_to_clipboard_value p {
+    color: rgba(20, 27, 92, 1);
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.ns_copy_to_clipboard_title {
+    font-size: 24px;
+    font-weight: 700;
+    color: rgba(20, 27, 92, 1);
+    text-align: center;
+    margin-bottom: 16px;
 }

package/src/components/NSCopyToClipboard.tsx

@@ -1,36 +1,36 @@
-import Styles from "./NSCopyToClipboard.module.css";
-import IconInputString from '../assets/images/icon-input-copy.svg';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSCopyToClipboardProps extends IBaseComponentProps
-{
-	title: string;
-	value: string;
-}
-
-export function NSCopyToClipboard(props: INSCopyToClipboardProps)
-{
-	function copyToClipboard(): void
-	{
-		if (navigator.clipboard && navigator.clipboard.writeText)
-			navigator.clipboard.writeText(props.value);
-	}
-	return (
-		<div id={props.id}
-			className={`${Styles.ns_copy_to_clipboard}   ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			<div className={Styles.ns_copy_to_clipboard_value}>
-				<p className="m-0">{props.value}</p>
-				<img
-					className={Styles.ns_copy_to_clipboard_icon}
-					src={IconInputString}
-					alt="Copy Icon"
-					width={24}
-					height={24}
-					onClick={copyToClipboard}
-				/>
-			</div>
-		</div>
-	);
+import Styles from "./NSCopyToClipboard.module.css";
+import IconInputString from '../assets/images/icon-input-copy.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSCopyToClipboardProps extends IBaseComponentProps
+{
+	title: string;
+	value: string;
+}
+
+export function NSCopyToClipboard(props: INSCopyToClipboardProps)
+{
+	function copyToClipboard(): void
+	{
+		if (navigator.clipboard && navigator.clipboard.writeText)
+			navigator.clipboard.writeText(props.value);
+	}
+	return (
+		<div id={props.id}
+			className={`${Styles.ns_copy_to_clipboard}   ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<div className={Styles.ns_copy_to_clipboard_value}>
+				<p className="m-0">{props.value}</p>
+				<img
+					className={Styles.ns_copy_to_clipboard_icon}
+					src={IconInputString}
+					alt="Copy Icon"
+					width={24}
+					height={24}
+					onClick={copyToClipboard}
+				/>
+			</div>
+		</div>
+	);
 }

package/src/components/NSDeleteDialog.tsx

@@ -1,26 +1,26 @@
-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}
-            <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}
+            <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,37 +1,37 @@
-.ns_dialog_container {
-    background-color: #00000080;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 99;
-}
-
-.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: 16px 16px;
-    position: fixed;
-    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
-    color: black;
-    cursor: default;
-}
-
-.ns_dialog_children {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.ns_dialog_background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
+.ns_dialog_container {
+    background-color: #00000080;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 99;
+}
+
+.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: 16px 16px;
+    position: fixed;
+    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
+    color: black;
+    cursor: default;
+}
+
+.ns_dialog_children {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.ns_dialog_background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
 }

package/src/components/NSDialog.tsx

@@ -1,48 +1,48 @@
-import { ReactNode } from 'react';
-import Styles from './NSDialog.module.css';
-import { IBaseComponentProps } from '../main';
-
-export interface NSDialogProps extends IBaseComponentProps
-{
-    onClose: () => void;
-    children: ReactNode;
-}
-
-function NSDialog(props: NSDialogProps)
-{
-    return (
-        <section
-            id={props.id}
-            className={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 Styles from './NSDialog.module.css';
+import { IBaseComponentProps } from '../main';
+
+export interface NSDialogProps extends IBaseComponentProps
+{
+    onClose: () => void;
+    children: ReactNode;
+}
+
+function NSDialog(props: NSDialogProps)
+{
+    return (
+        <section
+            id={props.id}
+            className={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 >
+    );
+}
+
 export default NSDialog;

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