namirasoft-site-react 1.3.307 → 1.3.308

package/src/components/NSElectronicCard.tsx

@@ -1,48 +1,48 @@
-import { useState } from 'react';
-import Styles from './NSElectronicCard.module.css';
-export interface INSElectronicCardProps
-{
-    src: string;
-    title: string | number;
-    cardNumber: string;
-    info?: string;
-    alt?: string;
-}
-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 >
-    );
-}
-
+import { useState } from 'react';
+import Styles from './NSElectronicCard.module.css';
+export interface INSElectronicCardProps
+{
+    src: string;
+    title: string | number;
+    cardNumber: string;
+    info?: string;
+    alt?: string;
+}
+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 >
+    );
+}
+
 export default NSElectronicCard;

package/src/components/NSEntityBar.module.css

@@ -1,78 +1,78 @@
-.ns_entity_bar_item {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	/* align-items: flex-start; */
-	gap: 24px;
-	padding: 24px;
-	box-shadow: 0 2px 10px 4px #00000040;
-	width: 100%;
-	max-width: 304px;
-	border-radius: 24px;
-}
-
-.ns_entity_bar_image_container {
-	width: 100%;
-}
-
-.ns_entity_bar_image {
-	border-radius: 16px;
-	object-fit: cover;
-	width: 100% !important;
-	height: 100% !important;
-}
-
-.ns_entity_bar_details_container {
-	text-align: start;
-}
-
-.ns_entity_bar_image_title {
-	color: #001664;
-	font-size: 24px;
-	font-weight: 700;
-	font-family: inherit;
-	line-height: 24px;
-	margin-bottom: 16px;
-	text-align: start;
-}
-
-.ns_entity_bar_image_description {
-	color: #001664;
-	font-size: 16px;
-	font-weight: 400;
-	font-family: inherit;
-	line-height: 24px;
-	text-align: justify;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_entity_bar_item {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		/* align-items: flex-start; */
-		gap: 48px;
-		width: 100%;
-		max-width: 1170px;
-	}
-
-	.ns_entity_bar_details_container {
-		padding: 24px 0;
-		width: 68%;
-	}
-
-	.ns_entity_bar_image_container {
-		width: 30%;
-		max-width: 304px;
-	}
-
-	.ns_entity_bar_image_title {
-		font-size: 32px;
-		line-height: 32px;
-	}
-
-	.ns_entity_bar_image {
-		border-radius: 8px;
-	}
-
+.ns_entity_bar_item {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	/* align-items: flex-start; */
+	gap: 24px;
+	padding: 24px;
+	box-shadow: 0 2px 10px 4px #00000040;
+	width: 100%;
+	max-width: 304px;
+	border-radius: 24px;
+}
+
+.ns_entity_bar_image_container {
+	width: 100%;
+}
+
+.ns_entity_bar_image {
+	border-radius: 16px;
+	object-fit: cover;
+	width: 100% !important;
+	height: 100% !important;
+}
+
+.ns_entity_bar_details_container {
+	text-align: start;
+}
+
+.ns_entity_bar_image_title {
+	color: #001664;
+	font-size: 24px;
+	font-weight: 700;
+	font-family: inherit;
+	line-height: 24px;
+	margin-bottom: 16px;
+	text-align: start;
+}
+
+.ns_entity_bar_image_description {
+	color: #001664;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: inherit;
+	line-height: 24px;
+	text-align: justify;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_entity_bar_item {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		/* align-items: flex-start; */
+		gap: 48px;
+		width: 100%;
+		max-width: 1170px;
+	}
+
+	.ns_entity_bar_details_container {
+		padding: 24px 0;
+		width: 68%;
+	}
+
+	.ns_entity_bar_image_container {
+		width: 30%;
+		max-width: 304px;
+	}
+
+	.ns_entity_bar_image_title {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.ns_entity_bar_image {
+		border-radius: 8px;
+	}
+
 }

package/src/components/NSEntityBar.tsx

@@ -1,28 +1,28 @@
-import Styles from './NSEntityBar.module.css'
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IImageProps } from '../props/IImageProps';
-
-export interface INSEntityBarProps extends IBaseComponentProps
-{
-	title: string;
-	description: string;
-	image: IImageProps;
-}
-
-export function NSEntityBar(props: INSEntityBarProps)
-{
-	return (
-		<article id={props.id}
-			className={`${Styles.ns_entity_bar_item} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			<figure className={Styles.ns_entity_bar_image_container}>
-				<img className={Styles.ns_entity_bar_image} {...props.image} alt='Entity Bar' width={256} height={256} />
-			</figure>
-			<div className={Styles.ns_entity_bar_details_container}>
-				<h3 className={Styles.ns_entity_bar_image_title}> {props.title} </h3>
-				<p className={Styles.ns_entity_bar_image_description} > {props.description} </p>
-			</div>
-		</article>
-	);
+import Styles from './NSEntityBar.module.css'
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IImageProps } from '../props/IImageProps';
+
+export interface INSEntityBarProps extends IBaseComponentProps
+{
+	title: string;
+	description: string;
+	image: IImageProps;
+}
+
+export function NSEntityBar(props: INSEntityBarProps)
+{
+	return (
+		<article id={props.id}
+			className={`${Styles.ns_entity_bar_item} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<figure className={Styles.ns_entity_bar_image_container}>
+				<img className={Styles.ns_entity_bar_image} {...props.image} alt='Entity Bar' width={256} height={256} />
+			</figure>
+			<div className={Styles.ns_entity_bar_details_container}>
+				<h3 className={Styles.ns_entity_bar_image_title}> {props.title} </h3>
+				<p className={Styles.ns_entity_bar_image_description} > {props.description} </p>
+			</div>
+		</article>
+	);
 }

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

package/src/components/NSEntityCardBackground.tsx

@@ -1,35 +1,35 @@
-import Styles from './NSEntityCardBackground.module.css'
-import { NSLinkBlue } from './NSLinkBlue';
-import { ILinkProps } from '../props/ILinkProps';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSEntityCardBackgroundProps extends IBaseComponentProps
-{
-	title: string;
-	link?: ILinkProps
-}
-
-export function NSEntityCardBackground(props: INSEntityCardBackgroundProps)
-{
-	return (
-		<>
-			<article id={props.id}
-				className={`${Styles.card_background} ${props.classList?.join(" ")}`}
-				style={props.style}
-			>
-				<p className={Styles.card_background_text}>
-					{props.title}
-				</p>
-				{
-					props.link &&
-					<div className={Styles.ns_card_link_container}>
-						<NSLinkBlue
-							href={props.link.href}
-							target={props.link.target}
-						/>
-					</div>
-				}
-			</article >
-		</>
-	);
+import Styles from './NSEntityCardBackground.module.css'
+import { NSLinkBlue } from './NSLinkBlue';
+import { ILinkProps } from '../props/ILinkProps';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSEntityCardBackgroundProps extends IBaseComponentProps
+{
+	title: string;
+	link?: ILinkProps
+}
+
+export function NSEntityCardBackground(props: INSEntityCardBackgroundProps)
+{
+	return (
+		<>
+			<article id={props.id}
+				className={`${Styles.card_background} ${props.classList?.join(" ")}`}
+				style={props.style}
+			>
+				<p className={Styles.card_background_text}>
+					{props.title}
+				</p>
+				{
+					props.link &&
+					<div className={Styles.ns_card_link_container}>
+						<NSLinkBlue
+							href={props.link.href}
+							target={props.link.target}
+						/>
+					</div>
+				}
+			</article >
+		</>
+	);
 }

package/src/components/NSFilterBox.module.css

@@ -1,48 +1,48 @@
-.ns_select_container {
-	display: flex;
-	flex-direction: row;
-	justify-content: left;
-	align-items: flex-start;
-	width: 100%;
-	gap: 16px;
-}
-
-.ns_input_container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	position: relative;
-	width: 100%;
-	gap: 16px;
-}
-
-.ns_input_icon_container {
-	margin: 0 !important;
-	position: absolute;
-	left: 12px;
-	top: 12px;
-}
-
-.ns_input {
-	border-radius: 8px;
-	padding: 10px 12px 10px 48px;
-	font-size: 16px;
-	font-weight: 400;
-	border: 1px solid rgba(0, 0, 0, 1) !important;
-	width: 100%;
-}
-
-.ns_input_close_icon {
-	margin: 0 !important;
-	position: absolute;
-	right: 16px;
-	cursor: pointer;
-}
-
-.ns_selected_list_parent {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 8px;
+.ns_select_container {
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+	align-items: flex-start;
+	width: 100%;
+	gap: 16px;
+}
+
+.ns_input_container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	position: relative;
+	width: 100%;
+	gap: 16px;
+}
+
+.ns_input_icon_container {
+	margin: 0 !important;
+	position: absolute;
+	left: 12px;
+	top: 12px;
+}
+
+.ns_input {
+	border-radius: 8px;
+	padding: 10px 12px 10px 48px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	width: 100%;
+}
+
+.ns_input_close_icon {
+	margin: 0 !important;
+	position: absolute;
+	right: 16px;
+	cursor: pointer;
+}
+
+.ns_selected_list_parent {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 8px;
 }