namirasoft-site-react 1.3.443 → 1.3.445

package/src/components/NSChartTable.tsx

@@ -1,94 +1,96 @@
 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';
-    };
+export function 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>
-    );
-};
-
-export default NSChartTable;
+	return (
+		<div>
+			<Table
+				columns={columns}
+				dataSource={props.data}
+				pagination={false}
+				scroll={{ x: 800 }}
+				rowClassName={() => Styles.custom_row}
+			/>
+		</div>
+	);
+};

package/src/components/NSDownTimer.tsx

@@ -1,12 +1,10 @@
 import Styles from './NSDownTimer.module.css';
 
-function NSDownTimer()
+export function NSDownTimer()
 {
     return (
         <div className={Styles.ns_down_timer_container}>
             NSDownTimer
         </div>
     );
-}
-
-export default NSDownTimer;
+};

package/src/components/NSDownload.tsx

@@ -1,58 +1,63 @@
 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");
-
-    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 function NSDownload(props: NSDownloadProps)
+{
+	const [state, setState] = useState("32-bit");
 
-export default NSDownload;
+	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>
+	);
+};

package/src/components/NSRange.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import Styles from './NSRange.module.css';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
 
-import Color from "../Color";
+import { Color } from "../Color";
 
 export interface NSRangeRow
 {

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;

package/src/components/NSTimeTable.tsx

@@ -1,47 +1,48 @@
 import { ConfigProvider, Table } from 'antd';
 import type { TableProps } from 'antd';
-import { IBaseComponentProps } from '../main';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import Styles from "./NSTimeTable.module.css"
 
-interface DataType {
-    key: string;
-    year: string;
-    month: string;
-    week: string;
-    today: string;
+interface DataType
+{
+	key: string;
+	year: string;
+	month: string;
+	week: string;
+	today: string;
 }
 
-export interface NSTimeTableProps extends IBaseComponentProps {
-    rows: DataType[];
-    columns: TableProps<DataType>['columns'];
+export interface NSTimeTableProps extends IBaseComponentProps
+{
+	rows: DataType[];
+	columns: TableProps<DataType>['columns'];
 }
 
-const NSTimeTable = (props: NSTimeTableProps) => {
+export function NSTimeTable(props: NSTimeTableProps)
+{
 
-    return (
-        <ConfigProvider theme={{
-            components: {
-                Table: {
-                    headerBg: "#141B5C",
-                    headerColor: "#fff",
-                    headerSplitColor: "#141B5C",
-                    cellFontSize: 16,
-                    colorText: "#141B5C",
-                }
-            }
-        }}>
-            <Table
-                columns={props.columns}
-                dataSource={props.rows}
-                bordered={false}
-                rowClassName={Styles.custom_row}
-                rowHoverable={false}
-                scroll={{
-                    x: true
-                }}
-            />
-        </ConfigProvider>
-    )
-};
-
-export default NSTimeTable;
+	return (
+		<ConfigProvider theme={{
+			components: {
+				Table: {
+					headerBg: "#141B5C",
+					headerColor: "#fff",
+					headerSplitColor: "#141B5C",
+					cellFontSize: 16,
+					colorText: "#141B5C",
+				}
+			}
+		}}>
+			<Table
+				columns={props.columns}
+				dataSource={props.rows}
+				bordered={false}
+				rowClassName={Styles.custom_row}
+				rowHoverable={false}
+				scroll={{
+					x: true
+				}}
+			/>
+		</ConfigProvider>
+	)
+};

package/src/components/NSTimelineMonthly.tsx

@@ -1,6 +1,6 @@
 import Styles from './NSTimelineMonthly.module.css';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Color from "../Color"
+import { Color } from "../Color"
 export interface NSdata
 {
     title: string;