namirasoft-site-react 1.3.443 → 1.3.444

package/src/components/NSCardScreenshot.tsx

@@ -1,31 +1,34 @@
-import { IBaseComponentProps } from "../main";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import Styles from "./NSCardScreenshot.module.css"
 
-export interface NSCardScreenshotProps extends IBaseComponentProps {
-    key: number;
-    screenshot: string;
-    timeSpent: string;
-    onDelete: () => void;
+export interface NSCardScreenshotProps extends IBaseComponentProps
+{
+	key: number;
+	screenshot: string;
+	timeSpent: string;
+	onDelete: () => void;
 };
 
-const NSCardScreenshot = (props: NSCardScreenshotProps) => {
-    return (
-        <div className={`${Styles.card_screenshot} ${props.classList?.join(' ')}`} style={props.style}>
-            <div className={Styles.card_screenshot_header}>
-                <span className={Styles.timeSpent}>{props.timeSpent}</span>
-                <div onClick={() => {
-                    if (props.onDelete)
-                        props.onDelete()
-                }} 
-                className={Styles.deleteButton}>
-                    <img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt="" />
-                </div>
-            </div>
-            <div className={Styles.screenshot_imageSection}>
-                <img src={props.screenshot} alt="Screenshot" className={Styles.image} />
-            </div>
-        </div>
-    );
+const NSCardScreenshot = (props: NSCardScreenshotProps) =>
+{
+	return (
+		<div className={`${Styles.card_screenshot} ${props.classList?.join(' ')}`} style={props.style}>
+			<div className={Styles.card_screenshot_header}>
+				<span className={Styles.timeSpent}>{props.timeSpent}</span>
+				<div onClick={() =>
+				{
+					if (props.onDelete)
+						props.onDelete()
+				}}
+					className={Styles.deleteButton}>
+					<img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt="" />
+				</div>
+			</div>
+			<div className={Styles.screenshot_imageSection}>
+				<img src={props.screenshot} alt="Screenshot" className={Styles.image} />
+			</div>
+		</div>
+	);
 };
 
 export default NSCardScreenshot;

package/src/components/NSChartColumn.tsx

@@ -1,114 +1,109 @@
 import { Bar } from 'react-chartjs-2';
-import {
-    Chart as ChartJS,
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    Title,
-    Tooltip,
-    Legend,
-    ChartOptions,
-} from 'chart.js';
-import { IBaseComponentProps } from '../main';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, } from 'chart.js';
+	import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import Styles from "./NSChartColumn.module.css"
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
-export interface NSChartColumnProps extends IBaseComponentProps {
-    labels: string[];
-    datasets: number[];
-    range: {
-        min: number,
-        max: number,
-    }
-    yGrid?: boolean;
-    height?: number;
-    width?: number;
+export interface NSChartColumnProps extends IBaseComponentProps
+{
+	labels: string[];
+	datasets: number[];
+	range: {
+		min: number,
+		max: number,
+	}
+	yGrid?: boolean;
+	height?: number;
+	width?: number;
 }
 
-const NSChartColumn = (props: NSChartColumnProps) => {
-    const data = {
-        labels: props.labels,
-        datasets: [
-            {
-                label: 'Dataset 1',
-                data: props.datasets,
-                backgroundColor: '#3354F4',
-                borderRadius: 10,
-                barThickness: 12,
-                borderSkipped: false,
-            },
-        ],
-    };
+const NSChartColumn = (props: NSChartColumnProps) =>
+{
+	const data = {
+		labels: props.labels,
+		datasets: [
+			{
+				label: 'Dataset 1',
+				data: props.datasets,
+				backgroundColor: '#3354F4',
+				borderRadius: 10,
+				barThickness: 12,
+				borderSkipped: false,
+			},
+		],
+	};
 
-    const options: ChartOptions<'bar'> = {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                display: false,
-            },
-            tooltip: {
-                enabled: true,
-                callbacks: {
-                    label: function (context) {
-                        return `$${context.raw}`;
-                    },
-                },
-            },
-        },
-        scales: {
-            x: {
-                ticks: {
-                    font: {
-                        size: 8,
-                        weight: 700
-                    },
-                    color: '#141B5C',
-                    maxRotation: 554,
-                    minRotation: 0,
-                },
-                grid: {
-                    display: false,
-                },
-                border: {
-                    display: false,
-                }
-            },
-            y: {
-                min: props.range.min,
-                max: props.range.max,
-                ticks: {
-                    callback: function (value) {
-                        return `$${value}`;
-                    },
-                    font: {
-                        size: 8,
-                        weight: 700,
-                    },
-                    color: '#141B5C',
-                },
-                grid: {
-                    display: props.yGrid,
-                    color: "#E6EEF5"
-                },
-                border: {
-                    display: false,
-                },
-            },
-        },
-    };
+	const options: ChartOptions<'bar'> = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				enabled: true,
+				callbacks: {
+					label: function (context)
+					{
+						return `$${context.raw}`;
+					},
+				},
+			},
+		},
+		scales: {
+			x: {
+				ticks: {
+					font: {
+						size: 8,
+						weight: 700
+					},
+					color: '#141B5C',
+					maxRotation: 554,
+					minRotation: 0,
+				},
+				grid: {
+					display: false,
+				},
+				border: {
+					display: false,
+				}
+			},
+			y: {
+				min: props.range.min,
+				max: props.range.max,
+				ticks: {
+					callback: function (value)
+					{
+						return `$${value}`;
+					},
+					font: {
+						size: 8,
+						weight: 700,
+					},
+					color: '#141B5C',
+				},
+				grid: {
+					display: props.yGrid,
+					color: "#E6EEF5"
+				},
+				border: {
+					display: false,
+				},
+			},
+		},
+	};
 
-    return (
-        <div style={props.style} className={`${Styles.chart_column_container} ${props.classList?.join(" ")}`}>
-            <Bar
-                data={data}
-                options={options}
-                height={props.height ? props.height : 250}
-                width={props.width ? props.width : 320}
-            />
-        </div>
-    );
+	return (
+		<div style={props.style} className={`${Styles.chart_column_container} ${props.classList?.join(" ")}`}>
+			<Bar
+				data={data}
+				options={options}
+				height={props.height ? props.height : 250}
+				width={props.width ? props.width : 320}
+			/>
+		</div>
+	);
 };
 
 export default NSChartColumn;

package/src/components/NSChartPie.tsx

@@ -2,7 +2,7 @@
 import { Doughnut } from 'react-chartjs-2';
 import
 {
-    Chart as ChartJS,
+	Chart as ChartJS,
     ArcElement,
     Tooltip,
     Legend,
@@ -17,7 +17,7 @@ import
     Plugin,
     ArcElement as ArcElementType
 } from 'chart.js';
-import { IBaseComponentProps } from '../main';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
 
 ChartJS.register(
     ArcElement, Tooltip, Legend, Title,

package/src/components/NSChartTable.tsx

@@ -1,94 +1,98 @@
 import { Table, Progress } from 'antd';
 import { ColumnType } from 'antd/es/table';
-import { IBaseComponentProps } from '../main';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import Styles from "./NSChartTable.module.css"
 
-interface DataType {
-    key: string;
-    job: string;
-    totalHours: number;
-    percentage: number;
-    cost: number;
-    income: number;
-    benefit: number;
+interface DataType
+{
+	key: string;
+	job: string;
+	totalHours: number;
+	percentage: number;
+	cost: number;
+	income: number;
+	benefit: number;
 }
 
-interface CustomTableProps extends IBaseComponentProps {
-    data: DataType[];
+interface CustomTableProps extends IBaseComponentProps
+{
+	data: DataType[];
 }
 
-const NSChartTable = (props: CustomTableProps) => {
-    const getColor = (percentage: number) => {
-        if (percentage >= 75) return '#368F01';
-        if (percentage >= 60) return ' #44B400';
-        if (percentage >= 50) return '#56E500';
-        if (percentage >= 25) return '#FAFF00';
-        return 'red';
-    };
+const NSChartTable = (props: CustomTableProps) =>
+{
+	const getColor = (percentage: number) =>
+	{
+		if (percentage >= 75) return '#368F01';
+		if (percentage >= 60) return ' #44B400';
+		if (percentage >= 50) return '#56E500';
+		if (percentage >= 25) return '#FAFF00';
+		return 'red';
+	};
 
-    const columns: ColumnType<DataType>[] = [
-        {
-            title: '',
-            dataIndex: 'job',
-            key: 'job',
-        },
-        {
-            title: 'Total Hours',
-            dataIndex: 'totalHours',
-            key: 'totalHours',
-            render: (text: number) => <div>{text}</div>,
-        },
-        {
-            title: 'Percentage',
-            dataIndex: 'percentage',
-            key: 'percentage',
-            render: (text: number) => <div>{text}%</div>,
-        },
-        {
-            title: 'Cost',
-            dataIndex: 'cost',
-            key: 'cost',
-            render: (text: number) => <div>${text}</div>,
-        },
-        {
-            title: 'Income',
-            dataIndex: 'income',
-            key: 'income',
-            render: (text: number) => <div>${text}</div>,
-        },
-        {
-            title: 'Benefit',
-            dataIndex: 'benefit',
-            key: 'benefit',
-            render: (text: number) => <div>${text}</div>,
-        },
-        {
-            title: '',
-            dataIndex: 'totalHours',
-            key: 'chart',
-            render: (totalHours: number, record: DataType) => (
-                <Progress
-                    percent={(totalHours / 8) * 100}
-                    showInfo={false}
-                    strokeColor={getColor(record.percentage)}
-                    strokeWidth={16}
-                    size={{ width: 310, height: 16 }}
-                />
-            ),
-        },
-    ];
+	const columns: ColumnType<DataType>[] = [
+		{
+			title: '',
+			dataIndex: 'job',
+			key: 'job',
+		},
+		{
+			title: 'Total Hours',
+			dataIndex: 'totalHours',
+			key: 'totalHours',
+			render: (text: number) => <div>{text}</div>,
+		},
+		{
+			title: 'Percentage',
+			dataIndex: 'percentage',
+			key: 'percentage',
+			render: (text: number) => <div>{text}%</div>,
+		},
+		{
+			title: 'Cost',
+			dataIndex: 'cost',
+			key: 'cost',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: 'Income',
+			dataIndex: 'income',
+			key: 'income',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: 'Benefit',
+			dataIndex: 'benefit',
+			key: 'benefit',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: '',
+			dataIndex: 'totalHours',
+			key: 'chart',
+			render: (totalHours: number, record: DataType) => (
+				<Progress
+					percent={(totalHours / 8) * 100}
+					showInfo={false}
+					strokeColor={getColor(record.percentage)}
+					strokeWidth={16}
+					size={{ width: 310, height: 16 }}
+				/>
+			),
+		},
+	];
 
-    return (
-        <div>
-            <Table
-                columns={columns}
-                dataSource={props.data}
-                pagination={false}
-                scroll={{ x: 800 }} 
-                rowClassName={() => Styles.custom_row}
-            />
-        </div>
-    );
+	return (
+		<div>
+			<Table
+				columns={columns}
+				dataSource={props.data}
+				pagination={false}
+				scroll={{ x: 800 }}
+				rowClassName={() => Styles.custom_row}
+			/>
+		</div>
+	);
 };
 
 export default NSChartTable;

package/src/components/NSDownload.tsx

@@ -1,58 +1,65 @@
 import { useState } from "react";
-import { IBaseComponentProps, NSButtonBlue } from "../main";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { NSBoxRadio } from "./NSBoxRadio";
-import Styles from "./NSDownload.module.css"
 import { NSLine } from "./NSLine";
+import { NSButtonBlue } from "./NSButtonBlue";
+import Styles from "./NSDownload.module.css"
 
-export interface NSDownloadProps extends IBaseComponentProps {
-    releaseDate: string;
+export interface NSDownloadProps extends IBaseComponentProps
+{
+	releaseDate: string;
 }
 
-function NSDownload(props: NSDownloadProps) {
-    const [state, setState] = useState("32-bit");
+function NSDownload(props: NSDownloadProps)
+{
+	const [state, setState] = useState("32-bit");
 
-    return (
-        <div className={`${Styles.download_parent} ${props.classList?.join(' ')}`}>
-            <div className={Styles.download_header}>
-                <h3 style={{ color: "#141B5C" }}>Choose Your Windows Architecture</h3>
-                <div className={Styles.radio_group}>
-                    <NSBoxRadio
-                        title={"32-bit"}
-                        required={false}
-                        isSelected={state === "32-bit"}
-                        onChanged={(event) => {
-                            let value = event.getValue();
-                            if (value) {
-                                setState("32-bit");
-                            }
-                        }}
-                        classList={[Styles.radio_button]}
-                    />
-                    <NSBoxRadio
-                        title={"64-bit"}
-                        required={false}
-                        isSelected={state === "64-bit"}
-                        onChanged={(event) => {
-                            let value = event.getValue();
-                            if (value) {
-                                setState("64-bit");
-                            }
-                        }}
-                        classList={[Styles.radio_button]}
-                    />
-                </div>
-            </div>
-            <NSLine />
-            <div className={Styles.download_detail}>
-                <h4 style={{ color: "#141B5C" }}>For Windows 7 and higher, Windows Server 2008 R2 and higher.</h4>
-                <div>
-                    <p style={{ marginBottom: "0" }}>Latest Version</p>
-                    <p style={{ marginBottom: "0" }}>Release Date: {props.releaseDate}</p>
-                </div>
-                <NSButtonBlue title="Download" onClick={() => { }} classList={[Styles.download_button]} />
-            </div>
-        </div>
-    );
+	return (
+		<div className={`${Styles.download_parent} ${props.classList?.join(' ')}`}>
+			<div className={Styles.download_header}>
+				<h3 style={{ color: "#141B5C" }}>Choose Your Windows Architecture</h3>
+				<div className={Styles.radio_group}>
+					<NSBoxRadio
+						title={"32-bit"}
+						required={false}
+						isSelected={state === "32-bit"}
+						onChanged={(event) =>
+						{
+							let value = event.getValue();
+							if (value)
+							{
+								setState("32-bit");
+							}
+						}}
+						classList={[Styles.radio_button]}
+					/>
+					<NSBoxRadio
+						title={"64-bit"}
+						required={false}
+						isSelected={state === "64-bit"}
+						onChanged={(event) =>
+						{
+							let value = event.getValue();
+							if (value)
+							{
+								setState("64-bit");
+							}
+						}}
+						classList={[Styles.radio_button]}
+					/>
+				</div>
+			</div>
+			<NSLine />
+			<div className={Styles.download_detail}>
+				<h4 style={{ color: "#141B5C" }}>For Windows 7 and higher, Windows Server 2008 R2 and higher.</h4>
+				<div>
+					<p style={{ marginBottom: "0" }}>Latest Version</p>
+					<p style={{ marginBottom: "0" }}>Release Date: {props.releaseDate}</p>
+				</div>
+				<NSButtonBlue title="Download" onClick={() => { }} classList={[Styles.download_button]} />
+			</div>
+		</div>
+	);
 }
 
 export default NSDownload;

package/src/components/NSTable.module.css

@@ -61,7 +61,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     width: 100%;
     gap: 16px;
@@ -82,6 +82,12 @@
     justify-content: center
 }
 
+@media screen and (min-width: 420px) { 
+	.ns_button {
+        justify-content: space-between;
+    }
+}
+
 @media screen and (min-width: 992px) {
     .ns_table {
         color: #000000;