namirasoft-site-react 1.3.354 → 1.3.356

package/src/components/NSCard.module.css

@@ -1,109 +1,109 @@
-.ns_card {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	/* gap: 24px 0; */
-	background-color: #fff;
-	box-shadow: 0 2px 10px 4px #00000040;
-	padding: 24px;
-	border-radius: 24px;
-	max-width: 310px;
-	position: relative;
-}
-
-.ns_card_detail_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	color: #001664;
-}
-
-.ns_card_title_img {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 8px;
-	width: 100%;
-}
-
-.ns_card_img {
-	border-radius: 16px;
-	object-fit: cover;
-	width: 100px;
-	height: 100%;
-}
-
-.ns_card_title {
-	font-style: inherit;
-	font-size: 24px;
-	font-weight: 700;
-	font-family: inherit;
-	line-height: normal;
-	text-align: center;
-	width: 100%;
-	color: inherit;
-}
-
-.ns_card_headline {
-	font-style: normal;
-	font-size: 18px;
-	font-weight: 500;
-	font-family: inherit;
-	line-height: normal;
-	text-align: justify;
-	color: inherit;
-}
-
-.ns_card_description {
-	font-style: normal;
-	font-size: 16px;
-	font-weight: 400;
-	font-family: inherit;
-	line-height: normal;
-	text-align: justify;
-	color: inherit;
-}
-
-.ns_card_link {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 12px 24px;
-	background-color: #3963FF;
-	box-shadow: inset 2px 2px 2px 0 #1754F3;
-	color: #fff;
-	font-weight: 400;
-	font-style: inherit;
-	line-height: normal;
-	border-radius: 24px;
-	width: 100%;
-	max-width: 272px;
-	margin-top: 24px;
-}
-
-.ns_card_link_container {
-	width: 100%;
-}
-
-
-@media only screen and (min-width: 576px) {
-	.ns_card {
-		width: 65%;
-	}
-}
-
-@media only screen and (min-width: 768px) {
-	.ns_card {
-		width: 41%;
-	}
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_card {
-		width: 25%;
-	}
+.ns_card {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	/* gap: 24px 0; */
+	background-color: #fff;
+	box-shadow: 0 2px 10px 4px #00000040;
+	padding: 24px;
+	border-radius: 24px;
+	max-width: 310px;
+	position: relative;
+}
+
+.ns_card_detail_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	color: #001664;
+}
+
+.ns_card_title_img {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 8px;
+	width: 100%;
+}
+
+.ns_card_img {
+	border-radius: 16px;
+	object-fit: cover;
+	width: 100px;
+	height: 100%;
+}
+
+.ns_card_title {
+	font-style: inherit;
+	font-size: 24px;
+	font-weight: 700;
+	font-family: inherit;
+	line-height: normal;
+	text-align: center;
+	width: 100%;
+	color: inherit;
+}
+
+.ns_card_headline {
+	font-style: normal;
+	font-size: 18px;
+	font-weight: 500;
+	font-family: inherit;
+	line-height: normal;
+	text-align: justify;
+	color: inherit;
+}
+
+.ns_card_description {
+	font-style: normal;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: inherit;
+	line-height: normal;
+	text-align: justify;
+	color: inherit;
+}
+
+.ns_card_link {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12px 24px;
+	background-color: #3963FF;
+	box-shadow: inset 2px 2px 2px 0 #1754F3;
+	color: #fff;
+	font-weight: 400;
+	font-style: inherit;
+	line-height: normal;
+	border-radius: 24px;
+	width: 100%;
+	max-width: 272px;
+	margin-top: 24px;
+}
+
+.ns_card_link_container {
+	width: 100%;
+}
+
+
+@media only screen and (min-width: 576px) {
+	.ns_card {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	.ns_card {
+		width: 41%;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_card {
+		width: 25%;
+	}
 }

package/src/components/NSCard.tsx

@@ -1,71 +1,71 @@
-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'
-		>
-			<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'
+		>
+			<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/NSDialog.module.css

@@ -0,0 +1,40 @@
+.ns_dialog_container {
+    background-color: #00000080;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    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;
+    height: 450px;
+    padding: 16px 16px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(0%, 05%);
+    color: black;
+    overflow-y: auto;
+}
+
+.ns_dialog_container img {
+    top: 0;
+    right: 0;
+    position: absolute;
+    transform: translate(-40%, 40%);
+    cursor: pointer;
+}
+
+.ns_dialog_children {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

package/src/components/NSDialog.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import Styles from './NSDialog.module.css';
+import { IBaseComponentProps } from '../main';
+
+export interface INSDialogProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    onClose: () => void;
+}
+
+function NSDialog(props: INSDialogProps)
+{
+    return (
+        <section
+            id={props.id}
+            className={`${Styles.ns_dialog_container} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            <div className={Styles.ns_dialog_content}>
+                <img
+                    src='https://static.namirasoft.com/image/concept/close/blue.svg'
+                    alt=''
+                    width={24}
+                    height={24}
+                    onClick={() => props.onClose()} />
+                <div className={Styles.ns_dialog_children}>
+                    {props.children}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default NSDialog;