namirasoft-site-react 1.4.554 → 1.4.556

package/src/components/NSBanner.tsx

@@ -1,81 +1,81 @@
-// todo move to its own probject: I guess this is Timify
-import { IImageProps } from "../main";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from "./NSBanner.module.css"
-
-export interface NSBannerProps extends IBaseComponentProps
-{
-	imageRight: (IImageProps & IBaseComponentProps) | null;
-	imageLeft: (IImageProps & IBaseComponentProps) | null;
-	headline?: (IBaseComponentProps & { text: string }) | null;
-	title: (IBaseComponentProps & { text: string }) | null;
-	description?: (IBaseComponentProps & { text: string }) | null;
-}
-
-export function NSBanner(props: NSBannerProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_banner_container} ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			{
-				props.imageLeft &&
-				<img
-					id={props.imageLeft.id}
-					className={`${Styles.ns_banner_image_right} ${props.imageLeft.classList?.join(" ") ?? ""}`}
-					src={props.imageLeft.src}
-					alt={props.imageLeft.alt}
-					width={192}
-					height={192}
-					style={props.imageLeft.style}
-				/>
-			}
-			<div className={Styles.ns_banner_text_container}>
-				{
-					props.headline &&
-					<h6
-						id={props.headline.id}
-						className={`${Styles.ns_banner_headline} ${props.headline.classList?.join(" ") ?? ""}`}
-						style={props.headline.style}
-					>
-						{props.headline.text}
-					</h6>
-				}
-				{
-					props.title &&
-					<h1
-						id={props.title.id}
-						className={`${Styles.ns_banner_title} ${props.title.classList?.join(" ") ?? ""}`}
-						style={props.title.style}
-					>
-						{props.title.text}
-					</h1>
-				}
-				{
-					props.description &&
-					<p
-						id={props.description.id}
-						className={`${Styles.ns_banner_description} ${props.description.classList?.join(" ") ?? ""}`}
-						style={props.description.style}
-					>
-						{props.description.text}
-					</p>
-				}
-			</div>
-			{
-				props.imageRight &&
-				<img
-					id={props.imageRight.id}
-					className={`${Styles.ns_banner_image_right} ${props.imageRight.classList?.join(" ") ?? ""}`}
-					src={props.imageRight.src}
-					alt={props.imageRight.alt}
-					width={192}
-					height={192}
-					style={props.imageRight.style}
-				/>
-			}
-		</div>
-	);
+// todo move to its own probject: I guess this is Timify
+import { IImageProps } from "../main";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from "./NSBanner.module.css"
+
+export interface NSBannerProps extends IBaseComponentProps
+{
+	imageRight: (IImageProps & IBaseComponentProps) | null;
+	imageLeft: (IImageProps & IBaseComponentProps) | null;
+	headline?: (IBaseComponentProps & { text: string }) | null;
+	title: (IBaseComponentProps & { text: string }) | null;
+	description?: (IBaseComponentProps & { text: string }) | null;
+}
+
+export function NSBanner(props: NSBannerProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_banner_container} ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			{
+				props.imageLeft &&
+				<img
+					id={props.imageLeft.id}
+					className={`${Styles.ns_banner_image_right} ${props.imageLeft.classList?.join(" ") ?? ""}`}
+					src={props.imageLeft.src}
+					alt={props.imageLeft.alt}
+					width={192}
+					height={192}
+					style={props.imageLeft.style}
+				/>
+			}
+			<div className={Styles.ns_banner_text_container}>
+				{
+					props.headline &&
+					<h6
+						id={props.headline.id}
+						className={`${Styles.ns_banner_headline} ${props.headline.classList?.join(" ") ?? ""}`}
+						style={props.headline.style}
+					>
+						{props.headline.text}
+					</h6>
+				}
+				{
+					props.title &&
+					<h1
+						id={props.title.id}
+						className={`${Styles.ns_banner_title} ${props.title.classList?.join(" ") ?? ""}`}
+						style={props.title.style}
+					>
+						{props.title.text}
+					</h1>
+				}
+				{
+					props.description &&
+					<p
+						id={props.description.id}
+						className={`${Styles.ns_banner_description} ${props.description.classList?.join(" ") ?? ""}`}
+						style={props.description.style}
+					>
+						{props.description.text}
+					</p>
+				}
+			</div>
+			{
+				props.imageRight &&
+				<img
+					id={props.imageRight.id}
+					className={`${Styles.ns_banner_image_right} ${props.imageRight.classList?.join(" ") ?? ""}`}
+					src={props.imageRight.src}
+					alt={props.imageRight.alt}
+					width={192}
+					height={192}
+					style={props.imageRight.style}
+				/>
+			}
+		</div>
+	);
 };

package/src/components/NSBarAction.module.css

@@ -1,92 +1,92 @@
-.ns_bar_action_holder {
-	z-index: 1;
-	padding: 0 16px;
-	position: sticky;
-	background-color: #fff;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-}
-
-.ns_bar_action_grant_parent {
-	flex-direction: column;
-}
-
-.ns_bar_action_parent {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	margin: 16px 0px 16px 0px;
-}
-
-.ns_bar_action_actions_holder {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	flex-wrap: wrap;
-	gap: 16px;
-	width: 100%;
-	margin: 8px 0px 8px 0px;
-}
-
-.ns_bar_action_info_container {
-	border: none;
-	outline: none;
-	background: none;
-}
-
-.ns_bar_action_title {
-	margin: 0px;
-	text-align: center;
-	font-size: 22px;
-	font-weight: bold;
-	color: rgba(20, 27, 92, 1);
-}
-
-
-@media only screen and (min-width: 480px) {
-	.ns_bar_action_actions_holder {
-		flex-direction: row;
-		flex: 1 1 0;
-	}
-
-	.ns_bar_action_grant_parent {
-		flex-direction: row;
-	}
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_bar_action_holder {
-		justify-content: space-between;
-		min-height: 64px;
-	}
-
-	.ns_bar_action_actions_holder {
-		justify-content: flex-end;
-	}
-
-	.ns_bar_action_info_container {
-		margin: 0;
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		gap: 4px;
-	}
-}
-
-@media print {
-    .ns_bar_action_actions_holder,
-    .ns_bar_action_info_container {
-        display: none;
-    }
+.ns_bar_action_holder {
+	z-index: 1;
+	padding: 0 16px;
+	position: sticky;
+	background-color: #fff;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.ns_bar_action_grant_parent {
+	flex-direction: column;
+}
+
+.ns_bar_action_parent {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin: 16px 0px 16px 0px;
+}
+
+.ns_bar_action_actions_holder {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	flex-wrap: wrap;
+	gap: 16px;
+	width: 100%;
+	margin: 8px 0px 8px 0px;
+}
+
+.ns_bar_action_info_container {
+	border: none;
+	outline: none;
+	background: none;
+}
+
+.ns_bar_action_title {
+	margin: 0px;
+	text-align: center;
+	font-size: 22px;
+	font-weight: bold;
+	color: rgba(20, 27, 92, 1);
+}
+
+
+@media only screen and (min-width: 480px) {
+	.ns_bar_action_actions_holder {
+		flex-direction: row;
+		flex: 1 1 0;
+	}
+
+	.ns_bar_action_grant_parent {
+		flex-direction: row;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_bar_action_holder {
+		justify-content: space-between;
+		min-height: 64px;
+	}
+
+	.ns_bar_action_actions_holder {
+		justify-content: flex-end;
+	}
+
+	.ns_bar_action_info_container {
+		margin: 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 4px;
+	}
+}
+
+@media print {
+    .ns_bar_action_actions_holder,
+    .ns_bar_action_info_container {
+        display: none;
+    }
 }

package/src/components/NSBarAction.tsx

@@ -1,96 +1,96 @@
-import { ReactNode, useState } from 'react';
-import { IBaseComponentProps } from '../main';
-import Styles from './NSBarAction.module.css';
-import { NSDialogInfo } from './NSDialogInfo';
-import { NSMenuAction, NSMenuActionProps } from './NSMenuAction';
-
-export interface NSBarActionProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: string;
-	menus?: { [group: string]: NSMenuActionProps[] };
-	children?: ReactNode;
-}
-
-export interface NSBarActionState
-{
-	show: boolean
-}
-
-export function isValidMenu(menus?: { [group: string]: NSMenuActionProps[] }) 
-{
-	let ans = false;
-	if (menus)
-		Object.keys(menus).forEach(menu =>
-		{
-			if (menus[menu].length > 0)
-				ans = true;
-		});
-	return ans;
-}
-
-export function isValidAction(props?: NSBarActionProps)
-{
-	if (props)
-		if (props.title?.trim() || props.description?.trim() || isValidMenu(props.menus))
-			return true;
-	return false;
-}
-
-export function NSBarAction(props: NSBarActionProps)
-{
-	const [state, setState] = useState<NSBarActionState>({
-		show: false
-	})
-
-	return (
-		<>
-			<div
-				id={props.id}
-				className={`${Styles.ns_bar_action_holder} ${props.classList?.join(" ") ?? ""}`}
-				style={props.style}
-			>
-				<div className={`container d-flex justify-content-center justify-content-lg-between align-items-center w-100  ${Styles.ns_bar_action_grant_parent}`}>
-					{
-						(props.title?.trim() || props.description?.trim()) &&
-						<div className={`d-lg-flex ${Styles.ns_bar_action_parent}`}>
-							{
-								props.title?.trim() &&
-								<p className={Styles.ns_bar_action_title}>{props.title}</p>
-							}
-							{
-								props.description?.trim() &&
-								<button className={Styles.ns_bar_action_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>
-							}
-							{
-								props.children
-							}
-							{
-								state.show &&
-								<NSDialogInfo
-									description={props.description}
-									title={props.title}
-									onClose={() => setState({ show: false })}
-									show_as_code={false}
-								>
-									<></>
-								</NSDialogInfo>
-							}
-						</div>
-					}
-					{
-						props.menus && isValidMenu(props.menus) &&
-						<div className={Styles.ns_bar_action_actions_holder}>
-							{
-								Object.keys(props.menus ?? {}).map((group, index) => <NSMenuAction key={`NSBarAction_NSMenuAction_Key_${index}`} name={group} items={(props.menus ?? {})[group]} />)
-							}
-						</div>
-					}
-				</div>
-			</div>
-		</>
-	);
+import { ReactNode, useState } from 'react';
+import { IBaseComponentProps } from '../main';
+import Styles from './NSBarAction.module.css';
+import { NSDialogInfo } from './NSDialogInfo';
+import { NSMenuAction, NSMenuActionProps } from './NSMenuAction';
+
+export interface NSBarActionProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: string;
+	menus?: { [group: string]: NSMenuActionProps[] };
+	children?: ReactNode;
+}
+
+export interface NSBarActionState
+{
+	show: boolean
+}
+
+export function isValidMenu(menus?: { [group: string]: NSMenuActionProps[] }) 
+{
+	let ans = false;
+	if (menus)
+		Object.keys(menus).forEach(menu =>
+		{
+			if (menus[menu].length > 0)
+				ans = true;
+		});
+	return ans;
+}
+
+export function isValidAction(props?: NSBarActionProps)
+{
+	if (props)
+		if (props.title?.trim() || props.description?.trim() || isValidMenu(props.menus))
+			return true;
+	return false;
+}
+
+export function NSBarAction(props: NSBarActionProps)
+{
+	const [state, setState] = useState<NSBarActionState>({
+		show: false
+	})
+
+	return (
+		<>
+			<div
+				id={props.id}
+				className={`${Styles.ns_bar_action_holder} ${props.classList?.join(" ") ?? ""}`}
+				style={props.style}
+			>
+				<div className={`container d-flex justify-content-center justify-content-lg-between align-items-center w-100  ${Styles.ns_bar_action_grant_parent}`}>
+					{
+						(props.title?.trim() || props.description?.trim()) &&
+						<div className={`d-lg-flex ${Styles.ns_bar_action_parent}`}>
+							{
+								props.title?.trim() &&
+								<p className={Styles.ns_bar_action_title}>{props.title}</p>
+							}
+							{
+								props.description?.trim() &&
+								<button className={Styles.ns_bar_action_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>
+							}
+							{
+								props.children
+							}
+							{
+								state.show &&
+								<NSDialogInfo
+									description={props.description}
+									title={props.title}
+									onClose={() => setState({ show: false })}
+									show_as_code={false}
+								>
+									<></>
+								</NSDialogInfo>
+							}
+						</div>
+					}
+					{
+						props.menus && isValidMenu(props.menus) &&
+						<div className={Styles.ns_bar_action_actions_holder}>
+							{
+								Object.keys(props.menus ?? {}).map((group, index) => <NSMenuAction key={`NSBarAction_NSMenuAction_Key_${index}`} name={group} items={(props.menus ?? {})[group]} />)
+							}
+						</div>
+					}
+				</div>
+			</div>
+		</>
+	);
 }