namirasoft-site-react 1.4.35 → 1.4.36

package/src/components/NSBarAction.tsx

@@ -1,93 +1,93 @@
-import React, { useState } from 'react';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSBarAction.module.css';
-import { INSActionMenuProps, NSActionMenu } from './NSActionMenu';
-import { NSInfoDialog } from './NSInfoDialog';
-import { isNotEmptyString } from './NSLayout';
-
-export interface INSBarActionProps 
-{
-	title: string;
-	description?: string;
-	menus: { [group: string]: INSActionMenuProps[] };
-}
-
-export interface NSBarActionState
-{
-	show: boolean
-}
-
-export function NSBarAction(props: INSBarActionProps)
-{
-	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
-
-	const [state, setState] = useState<NSBarActionState>({
-		show: false
-	})
-
-	const groups = Object.keys(props.menus);
-
-	return (
-		<>
-			<div className={Styles.ns_action_bar_holder}>
-				{/* Desktop  */}
-				<div className='container d-flex justify-content-center justify-content-lg-between  align-items-center w-100'>
-					<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
-						<h1 className={Styles.title}>{props.title}</h1>
-						{
-							isNotEmptyString(props.description) &&
-							<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
-								<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
-								<span> Info </span>
-							</button>
-						}
-						{
-							state.show &&
-							<NSInfoDialog
-								description={props.description}
-								title={props.title}
-								onClose={() => setState({ show: false })}
-							>
-								<></>
-							</NSInfoDialog>
-						}
-					</div>
-					<div
-						style={{ padding: groups.length !== 0 ? "16px 0" : "0" }}
-						className={Styles.ns_actions_holder}
-					>
-						{
-							groups.map((group, index) =>
-								<NSActionMenu key={index} name={group} items={props.menus[group]} />
-							)
-						}
-					</div>
-				</div>
-			</div>
-			{/* Mobile  */}
-			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				<h1 className={Styles.title}>{props.title}</h1>
-				{
-					props.description && lines &&
-					<>
-						<p className={Styles.description}>
-							{
-								lines.map((line, index) =>
-								{
-									return (
-										<React.Fragment key={index}>
-											{line.trim()}
-											{index !== lines.length - 1 && <br />}
-										</React.Fragment>
-									)
-								})
-							}
-						</p>
-						<NSSpace size={NSSpaceSizeType.MINI} />
-					</>
-				}
-			</div>
-		</>
-	);
+import React, { useState } from 'react';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import Styles from './NSBarAction.module.css';
+import { INSActionMenuProps, NSActionMenu } from './NSActionMenu';
+import { NSInfoDialog } from './NSInfoDialog';
+import { isNotEmptyString } from './NSLayout';
+
+export interface INSBarActionProps 
+{
+	title: string;
+	description?: string;
+	menus: { [group: string]: INSActionMenuProps[] };
+}
+
+export interface NSBarActionState
+{
+	show: boolean
+}
+
+export function NSBarAction(props: INSBarActionProps)
+{
+	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
+
+	const [state, setState] = useState<NSBarActionState>({
+		show: false
+	})
+
+	const groups = Object.keys(props.menus);
+
+	return (
+		<>
+			<div className={Styles.ns_action_bar_holder}>
+				{/* Desktop  */}
+				<div className='container d-flex justify-content-center justify-content-lg-between  align-items-center w-100'>
+					<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
+						<h1 className={Styles.title}>{props.title}</h1>
+						{
+							isNotEmptyString(props.description) &&
+							<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
+								<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
+								<span> Info </span>
+							</button>
+						}
+						{
+							state.show &&
+							<NSInfoDialog
+								description={props.description}
+								title={props.title}
+								onClose={() => setState({ show: false })}
+							>
+								<></>
+							</NSInfoDialog>
+						}
+					</div>
+					<div
+						style={{ padding: groups.length !== 0 ? "16px 0" : "0" }}
+						className={Styles.ns_actions_holder}
+					>
+						{
+							groups.map((group, index) =>
+								<NSActionMenu key={index} name={group} items={props.menus[group]} />
+							)
+						}
+					</div>
+				</div>
+			</div>
+			{/* Mobile  */}
+			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				<h1 className={Styles.title}>{props.title}</h1>
+				{
+					props.description && lines &&
+					<>
+						<p className={Styles.description}>
+							{
+								lines.map((line, index) =>
+								{
+									return (
+										<React.Fragment key={index}>
+											{line.trim()}
+											{index !== lines.length - 1 && <br />}
+										</React.Fragment>
+									)
+								})
+							}
+						</p>
+						<NSSpace size={NSSpaceSizeType.MINI} />
+					</>
+				}
+			</div>
+		</>
+	);
 }

package/src/components/NSBarAlert.module.css

@@ -1,70 +1,70 @@
-.ns_bar_alert_holder {
-	color: #141B5C;
-	background-color: #FE9900;
-	padding: 16px 0;
-	box-shadow: 0 4px 4px 0 #00000040;
-	border-bottom: solid 1px currentColor;
-}
-
-.ns_bar_alert_container {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-}
-
-.ns_bar_alert_description {
-	color: inherit;
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-}
-
-.ns_bar_alert_description>h3 {
-	color: inherit;
-	font-size: 20px;
-	font-weight: 600;
-	margin: 0 16px 2px 8px;
-}
-
-.ns_bar_alert_description>p {
-	color: inherit;
-	font-size: 12px;
-	font-weight: 300;
-	margin-bottom: 0;
-	text-align: center;
-}
-
-.ns_bar_alert_link>button {
-	color: inherit;
-	font-size: 16px;
-	font-weight: 600;
-	text-decoration: underline;
-	border: none;
-	outline: none;
-	background: none;
-	cursor: pointer;
-}
-
-
-@media only screen and (min-width: 768px) {
-	.ns_bar_alert_container {
-		justify-content: space-between;
-		gap: 0;
-	}
-
-	.ns_bar_alert_description {
-		justify-content: space-between;
-		gap: 0;
-	}
-
-	.ns_bar_alert_description>p {
-		text-align: start;
-	}
-
+.ns_bar_alert_holder {
+	color: #141B5C;
+	background-color: #FE9900;
+	padding: 16px 0;
+	box-shadow: 0 4px 4px 0 #00000040;
+	border-bottom: solid 1px currentColor;
+}
+
+.ns_bar_alert_container {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+}
+
+.ns_bar_alert_description {
+	color: inherit;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+}
+
+.ns_bar_alert_description>h3 {
+	color: inherit;
+	font-size: 20px;
+	font-weight: 600;
+	margin: 0 16px 2px 8px;
+}
+
+.ns_bar_alert_description>p {
+	color: inherit;
+	font-size: 12px;
+	font-weight: 300;
+	margin-bottom: 0;
+	text-align: center;
+}
+
+.ns_bar_alert_link>button {
+	color: inherit;
+	font-size: 16px;
+	font-weight: 600;
+	text-decoration: underline;
+	border: none;
+	outline: none;
+	background: none;
+	cursor: pointer;
+}
+
+
+@media only screen and (min-width: 768px) {
+	.ns_bar_alert_container {
+		justify-content: space-between;
+		gap: 0;
+	}
+
+	.ns_bar_alert_description {
+		justify-content: space-between;
+		gap: 0;
+	}
+
+	.ns_bar_alert_description>p {
+		text-align: start;
+	}
+
 }

package/src/components/NSBarAlert.tsx

@@ -1,31 +1,31 @@
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { INSBarTitleProps } from './NSBarTitle';
-import { NSSection } from './NSSection';
-import Styles from './NSBarAlert.module.css';
-
-export interface INSBarAlertProps extends IBaseComponentProps
-{
-	title: INSBarTitleProps;
-	onContinue?: () => void;
-	isVisible: () => boolean;
-}
-
-export function NSBarAlert(props: INSBarAlertProps)
-{
-	return (
-		<NSSection style={props.style} classList={[Styles.ns_bar_alert_holder]}>
-			<div className="container">
-				<article className={Styles.ns_bar_alert_container}>
-					<div className={Styles.ns_bar_alert_description}>
-						<img src="https://static.namirasoft.com/image/concept/alarm/blue.svg" alt="Alarm" width={24} height={24} />
-						<h3> {props.title.title} </h3>
-						<p> {props.title.description} </p>
-					</div>
-					<div className={Styles.ns_bar_alert_link}>
-						<button onClick={props.onContinue} > Continue  </button>
-					</div>
-				</article>
-			</div>
-		</NSSection>
-	);
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { INSBarTitleProps } from './NSBarTitle';
+import { NSSection } from './NSSection';
+import Styles from './NSBarAlert.module.css';
+
+export interface INSBarAlertProps extends IBaseComponentProps
+{
+	title: INSBarTitleProps;
+	onContinue?: () => void;
+	isVisible: () => boolean;
+}
+
+export function NSBarAlert(props: INSBarAlertProps)
+{
+	return (
+		<NSSection style={props.style} classList={[Styles.ns_bar_alert_holder]}>
+			<div className="container">
+				<article className={Styles.ns_bar_alert_container}>
+					<div className={Styles.ns_bar_alert_description}>
+						<img src="https://static.namirasoft.com/image/concept/alarm/blue.svg" alt="Alarm" width={24} height={24} />
+						<h3> {props.title.title} </h3>
+						<p> {props.title.description} </p>
+					</div>
+					<div className={Styles.ns_bar_alert_link}>
+						<button onClick={props.onContinue} > Continue  </button>
+					</div>
+				</article>
+			</div>
+		</NSSection>
+	);
 }

package/src/components/NSBarHeroBanner.module.css

@@ -1,43 +1,43 @@
-.hero_holder {
-	background-color: #001664;
-	position: relative;
-}
-
-.hero_wraper {
-	padding-bottom: 24px;
-	padding-top: 24px;
-	display: flex;
-	justify-content: center;
-}
-
-.hero_text_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: flex-start;
-	color: #fff;
-	z-index: 9;
-}
-
-.hero_image_bg {
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-	border-radius: 24px;
-	overflow: hidden;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_hero_vector_bg {
-		position: absolute;
-		width: 100%;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 2;
-		background-position: right bottom;
-		background-size: auto;
-		background-repeat: no-repeat;
-	}
+.hero_holder {
+	background-color: #001664;
+	position: relative;
+}
+
+.hero_wraper {
+	padding-bottom: 24px;
+	padding-top: 24px;
+	display: flex;
+	justify-content: center;
+}
+
+.hero_text_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	color: #fff;
+	z-index: 9;
+}
+
+.hero_image_bg {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	border-radius: 24px;
+	overflow: hidden;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_hero_vector_bg {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 2;
+		background-position: right bottom;
+		background-size: auto;
+		background-repeat: no-repeat;
+	}
 }

package/src/components/NSBarHeroBanner.tsx

@@ -1,62 +1,62 @@
-"use client";
-
-import Styles from './NSBarHeroBanner.module.css'
-import { Link } from 'react-router-dom';
-
-export interface INSBarHeroBannerProps
-{
-	title: string;
-	description?: string;
-	description_last?: string;
-	banner: string;
-}
-
-export function NSBarHeroBanner(props: INSBarHeroBannerProps)
-{
-	return (
-		<div className={Styles.hero_holder}>
-			<section className={Styles.hero_wraper}>
-				<div className="container mx-auto px-4 lg:px-12">
-					<div className="flex flex-wrap lg:flex-nowrap justify-center lg:justify-between">
-						<article className={`mb-6 lg:mb-0 lg:mb-12lg:pe-12 ${Styles.hero_text_container}`} >
-							<h1 className="ns-font-32-bold  ns_font_lg_40_bold mb-6">
-								{props.title}
-							</h1>
-							<p className="ns-font-16-normal  lg:mb-4">
-								{props.description}
-							</p>
-							<p className="ns-font-16-normal">
-								{props.description_last}
-							</p>
-							<div className="hidden lg:block mt-6">
-								<Link to="#" style={{ width: "100%", marginBottom: "24px" }} >
-									Contact US
-								</Link>
-								<Link to="#" style={{ width: "100%" }} >
-									Book a Meeting With Us
-								</Link>
-							</div>
-						</article>
-						<div style={{ backgroundImage: `url(${props.banner})` }} className={`hidden lg:block lg:w-full xl:w-1/2 ${Styles.hero_image_bg}`}>
-							<div className={Styles.ns_hero_vector_bg}></div>
-						</div>
-						<div className={`block lg:hidden ${Styles.hero_img_container}`}>
-							<img
-								src={props.banner}
-								alt=""
-							/>
-						</div>
-						<div className="w-full mt-6 block lg:hidden">
-							<Link to="#" style={{ width: "100%", marginBottom: "24px" }} >
-								Contact US
-							</Link>
-							<Link to="#" style={{ width: "100%" }} >
-								Book a Meeting With Us
-							</Link>
-						</div>
-					</div>
-				</div>
-			</section>
-		</div>
-	);
+"use client";
+
+import Styles from './NSBarHeroBanner.module.css'
+import { Link } from 'react-router-dom';
+
+export interface INSBarHeroBannerProps
+{
+	title: string;
+	description?: string;
+	description_last?: string;
+	banner: string;
+}
+
+export function NSBarHeroBanner(props: INSBarHeroBannerProps)
+{
+	return (
+		<div className={Styles.hero_holder}>
+			<section className={Styles.hero_wraper}>
+				<div className="container mx-auto px-4 lg:px-12">
+					<div className="flex flex-wrap lg:flex-nowrap justify-center lg:justify-between">
+						<article className={`mb-6 lg:mb-0 lg:mb-12lg:pe-12 ${Styles.hero_text_container}`} >
+							<h1 className="ns-font-32-bold  ns_font_lg_40_bold mb-6">
+								{props.title}
+							</h1>
+							<p className="ns-font-16-normal  lg:mb-4">
+								{props.description}
+							</p>
+							<p className="ns-font-16-normal">
+								{props.description_last}
+							</p>
+							<div className="hidden lg:block mt-6">
+								<Link to="#" style={{ width: "100%", marginBottom: "24px" }} >
+									Contact US
+								</Link>
+								<Link to="#" style={{ width: "100%" }} >
+									Book a Meeting With Us
+								</Link>
+							</div>
+						</article>
+						<div style={{ backgroundImage: `url(${props.banner})` }} className={`hidden lg:block lg:w-full xl:w-1/2 ${Styles.hero_image_bg}`}>
+							<div className={Styles.ns_hero_vector_bg}></div>
+						</div>
+						<div className={`block lg:hidden ${Styles.hero_img_container}`}>
+							<img
+								src={props.banner}
+								alt=""
+							/>
+						</div>
+						<div className="w-full mt-6 block lg:hidden">
+							<Link to="#" style={{ width: "100%", marginBottom: "24px" }} >
+								Contact US
+							</Link>
+							<Link to="#" style={{ width: "100%" }} >
+								Book a Meeting With Us
+							</Link>
+						</div>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
 }

package/src/components/NSBarNotification.module.css

@@ -1,35 +1,35 @@
-.ns_messenger {
-    background-color: #fff;
-    padding: 12px 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.ns_gray {
-    border: 3px solid gray;
-    box-shadow: 1px 1px 8px 0px gray;
-}
-
-.ns_blue {
-    border: 3px solid blue;
-    box-shadow: 1px 1px 8px 0px blue;
-}
-
-.ns_green {
-    border: 3px solid rgba(112, 224, 0, 1);
-    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
-}
-
-.ns_yellow {
-    border: 3px solid yellow;
-    box-shadow: 1px 1px 8px 0px yellow;
-}
-
-.ns_red {
-    border: 3px solid red;
-    box-shadow: 1px 1px 8px 0px red;
-}
-.ns_exit_icon{
-    cursor: pointer;
+.ns_messenger {
+    background-color: #fff;
+    padding: 12px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ns_gray {
+    border: 3px solid gray;
+    box-shadow: 1px 1px 8px 0px gray;
+}
+
+.ns_blue {
+    border: 3px solid blue;
+    box-shadow: 1px 1px 8px 0px blue;
+}
+
+.ns_green {
+    border: 3px solid rgba(112, 224, 0, 1);
+    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
+}
+
+.ns_yellow {
+    border: 3px solid yellow;
+    box-shadow: 1px 1px 8px 0px yellow;
+}
+
+.ns_red {
+    border: 3px solid red;
+    box-shadow: 1px 1px 8px 0px red;
+}
+.ns_exit_icon{
+    cursor: pointer;
 }