namirasoft-site-react 1.4.111 → 1.4.113

package/src/components/NSButton.tsx

@@ -1,26 +1,26 @@
-import Styles from "./NSButton.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IImageProps } from "../props/IImageProps";
-
-export interface INSButtonProps extends IBaseComponentProps
-{
-    title?: string;
-    icon?: IImageProps;
-	onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-	disabled?: boolean;
-}
-
-export function NSButton(props: INSButtonProps)
-{
-    return (
-        <button id={props.id}
-            className={`${props.disabled ? Styles.ns_button_disabled : Styles.ns_button} ${props.classList?.join(" ")}`}
-            style={props.style}
-			onClick={(e) => { props.onClick(e) }}
-			disabled={props.disabled}
-        >
-            {props.icon && <img {...props.icon} alt="Icon" width={24} height={24} />}
-            {props.title}
-        </button >
-    );
+import Styles from "./NSButton.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IImageProps } from "../props/IImageProps";
+
+export interface INSButtonProps extends IBaseComponentProps
+{
+    title?: string;
+    icon?: IImageProps;
+	onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+	disabled?: boolean;
+}
+
+export function NSButton(props: INSButtonProps)
+{
+    return (
+        <button id={props.id}
+            className={`${props.disabled ? Styles.ns_button_disabled : Styles.ns_button} ${props.classList?.join(" ")}`}
+            style={props.style}
+			onClick={(e) => { props.onClick(e) }}
+			disabled={props.disabled}
+        >
+            {props.icon && <img {...props.icon} alt="Icon" width={24} height={24} />}
+            {props.title}
+        </button >
+    );
 };

package/src/components/NSButtonBlue.module.css

@@ -1,5 +1,5 @@
-.ns_button_blue {
-    background-color: rgba(3, 119, 255, 1);
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
-	color: #fff !important;
+.ns_button_blue {
+    background-color: rgba(3, 119, 255, 1);
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
+	color: #fff !important;
 }

package/src/components/NSButtonBlue.tsx

@@ -1,20 +1,20 @@
-import { NSButton, INSButtonProps } from "./NSButton";
-import Style from "./NSButtonBlue.module.css";
-
-export function NSButtonBlue(props: INSButtonProps) 
-{
-	let classList = []
-	if (props.classList)
-		classList.push(...props.classList);
-	classList.push(Style.ns_button_blue);
-
-	return <NSButton
-		id={props.id}
-		title={props.title}
-		icon={props.icon}
-		onClick={props.onClick}
-		disabled={props.disabled}
-		classList={classList}
-		style={props.style}
-	/>;
+import { NSButton, INSButtonProps } from "./NSButton";
+import Style from "./NSButtonBlue.module.css";
+
+export function NSButtonBlue(props: INSButtonProps) 
+{
+	let classList = []
+	if (props.classList)
+		classList.push(...props.classList);
+	classList.push(Style.ns_button_blue);
+
+	return <NSButton
+		id={props.id}
+		title={props.title}
+		icon={props.icon}
+		onClick={props.onClick}
+		disabled={props.disabled}
+		classList={classList}
+		style={props.style}
+	/>;
 }

package/src/components/NSButtonGreen.module.css

@@ -1,5 +1,5 @@
-.ns_button_green {
-    background-color: #06D182;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff !important;
+.ns_button_green {
+    background-color: #06D182;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff !important;
 }

package/src/components/NSButtonGreen.tsx

@@ -1,20 +1,20 @@
-import { NSButton, INSButtonProps } from "./NSButton";
-import Style from "./NSButtonGreen.module.css";
-
-export function NSButtonGreen(props: INSButtonProps) 
-{
-	let classList = []
-	if (props.classList)
-		classList.push(...props.classList);
-	classList.push(Style.ns_button_green);
-
-	return <NSButton
-		id={props.id}
-		title={props.title}
-		icon={props.icon}
-		onClick={props.onClick}
-		disabled={props.disabled}
-		classList={classList}
-		style={props.style}
-	/>;
+import { NSButton, INSButtonProps } from "./NSButton";
+import Style from "./NSButtonGreen.module.css";
+
+export function NSButtonGreen(props: INSButtonProps) 
+{
+	let classList = []
+	if (props.classList)
+		classList.push(...props.classList);
+	classList.push(Style.ns_button_green);
+
+	return <NSButton
+		id={props.id}
+		title={props.title}
+		icon={props.icon}
+		onClick={props.onClick}
+		disabled={props.disabled}
+		classList={classList}
+		style={props.style}
+	/>;
 }

package/src/components/NSButtonRed.module.css

@@ -1,5 +1,5 @@
-.ns_button_red {
-    background-color: #FF3F3F;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff;
+.ns_button_red {
+    background-color: #FF3F3F;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff;
 }

package/src/components/NSButtonRed.tsx

@@ -1,20 +1,20 @@
-import { NSButton, INSButtonProps } from "./NSButton";
-import Style from "./NSButtonRed.module.css";
-
-export function NSButtonRed(props: INSButtonProps) 
-{
-	let classList = []
-	if (props.classList)
-		classList.push(...props.classList);
-	classList.push(Style.ns_button_red);
-
-	return <NSButton
-		id={props.id}
-		title={props.title}
-		icon={props.icon}
-		onClick={props.onClick}
-		disabled={props.disabled}
-		classList={classList}
-		style={props.style}
-	/>;
+import { NSButton, INSButtonProps } from "./NSButton";
+import Style from "./NSButtonRed.module.css";
+
+export function NSButtonRed(props: INSButtonProps) 
+{
+	let classList = []
+	if (props.classList)
+		classList.push(...props.classList);
+	classList.push(Style.ns_button_red);
+
+	return <NSButton
+		id={props.id}
+		title={props.title}
+		icon={props.icon}
+		onClick={props.onClick}
+		disabled={props.disabled}
+		classList={classList}
+		style={props.style}
+	/>;
 }

package/src/components/NSCard.module.css

@@ -1,115 +1,115 @@
-.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;
-	border-radius: 24px;
-	max-width: 310px;
-	position: relative;
-}
-
-.ns_card_detail_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	color: #001664;
-	width: 100%;
-	height: 100%;
-	padding: 24px;
-	text-decoration: none;
-}
-
-.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;
-	margin-bottom: 0;
-}
-
-.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;
-	margin-bottom: 0;
-}
-
-.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;
+	border-radius: 24px;
+	max-width: 310px;
+	position: relative;
+}
+
+.ns_card_detail_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	color: #001664;
+	width: 100%;
+	height: 100%;
+	padding: 24px;
+	text-decoration: none;
+}
+
+.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;
+	margin-bottom: 0;
+}
+
+.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;
+	margin-bottom: 0;
+}
+
+.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,64 +1,64 @@
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { NSLinkBlue } from './NSLinkBlue';
-import { ILinkProps } from '../props/ILinkProps';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IImageProps } from '../props/IImageProps';
-import Styles from './NSCard.module.css'
-
-export interface INSCardProps extends IBaseComponentProps
-{
-	title?: string;
-	headline?: {
-		color?: string;
-		text: string;
-	}
-	description?: string;
-	image: IImageProps;
-	link: ILinkProps;
-}
-
-export function NSCard(props: INSCardProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_card} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			<a
-				href={props.link.href}
-				target='_blank'
-				rel="noreferrer"
-				className={Styles.ns_card_detail_container}
-			>
-				<div className={Styles.ns_card_title_img}>
-					<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>
-				}
-			</a>
-			{
-				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" }}
-					/>
-					<NSSpace size={NSSpaceSizeType.SMALL} />
-				</div>
-			}
-		</div >
-	);
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { NSLinkBlue } from './NSLinkBlue';
+import { ILinkProps } from '../props/ILinkProps';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IImageProps } from '../props/IImageProps';
+import Styles from './NSCard.module.css'
+
+export interface INSCardProps extends IBaseComponentProps
+{
+	title?: string;
+	headline?: {
+		color?: string;
+		text: string;
+	}
+	description?: string;
+	image: IImageProps;
+	link: ILinkProps;
+}
+
+export function NSCard(props: INSCardProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_card} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<a
+				href={props.link.href}
+				target='_blank'
+				rel="noreferrer"
+				className={Styles.ns_card_detail_container}
+			>
+				<div className={Styles.ns_card_title_img}>
+					<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>
+				}
+			</a>
+			{
+				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" }}
+					/>
+					<NSSpace size={NSSpaceSizeType.SMALL} />
+				</div>
+			}
+		</div >
+	);
 }

package/src/components/NSCardScreenshot.module.css

@@ -1,42 +1,42 @@
-.card_screenshot {
-    border: 1px solid #CBD7FF;
-    border-radius: 8px;
-    width: 100%;
-    max-width: 370px;
-    height: 266px;
-    padding: 8px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.card_screenshot_header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-	color: #141B5C,
-}
-
-.timeSpent {
-    font-size: 16px;
-    font-weight: 600;
-    color: #141B5C,
-}
-
-.deleteButton {
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-}
-
-.deleteButton img {
-    width: 100%;
-}
-
-.screenshot_imageSection img {
-    width: 100%;
-    object-fit: cover;
-    border-radius: 4px;
+.card_screenshot {
+    border: 1px solid #CBD7FF;
+    border-radius: 8px;
+    width: 100%;
+    max-width: 370px;
+    height: 266px;
+    padding: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.card_screenshot_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+	color: #141B5C,
+}
+
+.timeSpent {
+    font-size: 16px;
+    font-weight: 600;
+    color: #141B5C,
+}
+
+.deleteButton {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+}
+
+.deleteButton img {
+    width: 100%;
+}
+
+.screenshot_imageSection img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 4px;
 }