namirasoft-site-react 1.3.229 → 1.3.232

package/src/components/NSPagination.tsx

@@ -1,125 +1,125 @@
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSPagination.module.css';
-
-export interface INSPaginationProps extends IBaseComponentProps
-{
-    pageSize: number;
-    totalItems: number;
-    currentPage: number;
-    onPageChange: (page: number) => void;
-}
-
-export function NSPagination(props: INSPaginationProps)
-{
-    const { pageSize, totalItems, currentPage, onPageChange } = props;
-    const totalPages = Math.ceil(totalItems / pageSize);
-    const windowSize = 2;
-    const minPage = Math.max(2, currentPage - windowSize);
-    const maxPage = Math.min(currentPage + windowSize, totalPages - 1);
-    const current_min = Math.min(totalItems, (currentPage - 1) * pageSize + 1);
-    const current_max = Math.min(totalItems, currentPage * pageSize);
-    const pages = [];
-
-    const pushPage = (page: number) =>
-    {
-        pages.push(
-            <div key={page} className={`${Styles.ns_select_number_parent}`}>
-                <a
-                    href="#"
-                    className={`${Styles.ns_paginate_link} ${page === currentPage ? Styles.ns_select_number : ''}`}
-                    onClick={(e) =>
-                    {
-                        e.preventDefault();
-                        onPageChange(page);
-                    }}
-                >
-                    {page}
-                </a>
-            </div>
-        );
-    };
-    //prev
-    pages.push(
-        <div key="prev">
-            <a
-                href="#"
-                onClick={(e) =>
-                {
-                    e.preventDefault();
-                    if (currentPage > 1)
-                        onPageChange(currentPage - 1);
-                }}
-            >
-                <img
-                    src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
-                    alt="left_vector"
-                    width={32}
-                    height={32}
-                />
-            </a>
-        </div>
-    );
-    //FirstPage
-    pushPage(1);
-    if (currentPage > windowSize + 2)
-    {
-        pages.push(
-            <div key="ellipsis1" className={Styles.ns_pagination_left_ellipses}>
-                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
-            </div>
-        );
-    }
-    for (let i = minPage; i <= maxPage; i++)
-        pushPage(i);
-    if (currentPage < totalPages - windowSize - 1)
-    {
-        pages.push(
-            <div key="ellipsis2" className={Styles.ns_pagination_right_ellipses}>
-                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
-            </div>
-        );
-    }
-    //LastPage
-    if (totalPages > 1)
-    {
-        pushPage(totalPages);
-    }
-    //next
-    pages.push(
-        <div key="next">
-            <a
-                href="#"
-                onClick={(e) =>
-                {
-                    e.preventDefault();
-                    if (currentPage < totalPages)
-                        onPageChange(currentPage + 1);
-                }}
-            >
-                <img
-                    src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
-                    width={32}
-                    height={32}
-                    alt="right_vector"
-                />
-            </a>
-        </div>
-    );
-    return (
-        <>
-            <div
-                id={props.id}
-                className={`${Styles.ns_pagination_container} ${props.classList?.join(' ')}`}
-                style={props.style}
-            >
-                {pages}
-            </div>
-
-            <div className={Styles.ns_pagination_info}>
-                <h6>
-                    {`(${current_min} - ${current_max}) of ${totalItems}`}
-                </h6>
-            </div>
-        </>
-    );
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSPagination.module.css';
+
+export interface INSPaginationProps extends IBaseComponentProps
+{
+    pageSize: number;
+    totalItems: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+}
+
+export function NSPagination(props: INSPaginationProps)
+{
+    const { pageSize, totalItems, currentPage, onPageChange } = props;
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const windowSize = 2;
+    const minPage = Math.max(2, currentPage - windowSize);
+    const maxPage = Math.min(currentPage + windowSize, totalPages - 1);
+    const current_min = Math.min(totalItems, (currentPage - 1) * pageSize + 1);
+    const current_max = Math.min(totalItems, currentPage * pageSize);
+    const pages = [];
+
+    const pushPage = (page: number) =>
+    {
+        pages.push(
+            <div key={page} className={`${Styles.ns_select_number_parent}`}>
+                <a
+                    href="#"
+                    className={`${Styles.ns_paginate_link} ${page === currentPage ? Styles.ns_select_number : ''}`}
+                    onClick={(e) =>
+                    {
+                        e.preventDefault();
+                        onPageChange(page);
+                    }}
+                >
+                    {page}
+                </a>
+            </div>
+        );
+    };
+    //prev
+    pages.push(
+        <div key="prev">
+            <a
+                href="#"
+                onClick={(e) =>
+                {
+                    e.preventDefault();
+                    if (currentPage > 1)
+                        onPageChange(currentPage - 1);
+                }}
+            >
+                <img
+                    src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
+                    alt="left_vector"
+                    width={32}
+                    height={32}
+                />
+            </a>
+        </div>
+    );
+    //FirstPage
+    pushPage(1);
+    if (currentPage > windowSize + 2)
+    {
+        pages.push(
+            <div key="ellipsis1" className={Styles.ns_pagination_left_ellipses}>
+                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+            </div>
+        );
+    }
+    for (let i = minPage; i <= maxPage; i++)
+        pushPage(i);
+    if (currentPage < totalPages - windowSize - 1)
+    {
+        pages.push(
+            <div key="ellipsis2" className={Styles.ns_pagination_right_ellipses}>
+                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+            </div>
+        );
+    }
+    //LastPage
+    if (totalPages > 1)
+    {
+        pushPage(totalPages);
+    }
+    //next
+    pages.push(
+        <div key="next">
+            <a
+                href="#"
+                onClick={(e) =>
+                {
+                    e.preventDefault();
+                    if (currentPage < totalPages)
+                        onPageChange(currentPage + 1);
+                }}
+            >
+                <img
+                    src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
+                    width={32}
+                    height={32}
+                    alt="right_vector"
+                />
+            </a>
+        </div>
+    );
+    return (
+        <>
+            <div
+                id={props.id}
+                className={`${Styles.ns_pagination_container} ${props.classList?.join(' ')}`}
+                style={props.style}
+            >
+                {pages}
+            </div>
+
+            <div className={Styles.ns_pagination_info}>
+                <h6>
+                    {`(${current_min} - ${current_max}) of ${totalItems}`}
+                </h6>
+            </div>
+        </>
+    );
 }

package/src/components/NSPanel.module.css

@@ -1,47 +1,47 @@
-.ns_panel_grid {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-    justify-content: center;
-}
-
-.ns_panel_column {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 8px;
-    margin: 0 auto;
-    width: 100%;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_panel_column {
-        max-width: 700px;
-        min-width: 270px;
-    }
-
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-        min-width: 270px;
-        max-width: 670px;
-    }
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_panel_column {
-        width: max-content;
-    }
+.ns_panel_grid {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 16px;
+    margin: 0 auto;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+    justify-content: center;
+}
+
+.ns_panel_column {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    margin: 0 auto;
+    width: 100%;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_column {
+        max-width: 700px;
+        min-width: 270px;
+    }
+
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+        min-width: 270px;
+        max-width: 670px;
+    }
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_panel_column {
+        width: max-content;
+    }
 }

package/src/components/NSPanel.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react";
-import Styles from './NSPanel.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSPanelProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    grid: boolean;
-}
-export function NSPanel(props: NSPanelProps)
-{
-    return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            {props.children}
-        </section>
-    );
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSPanelProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+export function NSPanel(props: NSPanelProps)
+{
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSSection.module.css

@@ -1,11 +1,11 @@
-.ns_section {
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
-}
-
-.ns_section_center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+.ns_section {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -1,24 +1,24 @@
-import { ReactNode } from "react";
-import Styles from './NSSection.module.css'
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionProps extends IBaseComponentProps
-{
-	children: ReactNode;
-	center_items?: boolean;
-}
-
-export function NSSection(props: INSSectionProps)
-{
-	let styles = [Styles.ns_section];
-	if (props.center_items)
-		styles.push(Styles.ns_section_center);
-	return (
-		<section id={props.id}
-			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.children}
-		</section>
-	);
+import { ReactNode } from "react";
+import Styles from './NSSection.module.css'
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionProps extends IBaseComponentProps
+{
+	children: ReactNode;
+	center_items?: boolean;
+}
+
+export function NSSection(props: INSSectionProps)
+{
+	let styles = [Styles.ns_section];
+	if (props.center_items)
+		styles.push(Styles.ns_section_center);
+	return (
+		<section id={props.id}
+			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.children}
+		</section>
+	);
 }

package/src/components/NSSectionBars.module.css

@@ -1,11 +1,11 @@
-.ns_entity_bar_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	gap: 24px;
+.ns_entity_bar_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	gap: 24px;
 }

package/src/components/NSSectionBars.tsx

@@ -1,26 +1,26 @@
-import Styles from './NSSectionBars.module.css';
-import { NSEntityBar, INSEntityBarProps } from './NSEntityBar';
-import { NSSection } from './NSSection';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionBarsProps extends IBaseComponentProps
-{
-	title?: string;
-	bars: INSEntityBarProps[]
-}
-
-export function NSSectionBars(props: INSSectionBarsProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-				{
-					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionBars.module.css';
+import { NSEntityBar, INSEntityBarProps } from './NSEntityBar';
+import { NSSection } from './NSSection';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionBarsProps extends IBaseComponentProps
+{
+	title?: string;
+	bars: INSEntityBarProps[]
+}
+
+export function NSSectionBars(props: INSSectionBarsProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionCards.module.css

@@ -1,39 +1,39 @@
-.ns_section_cards_holder {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-}
-
-.ns_section_cards_title_container {
-	margin-bottom: 32px;
-}
-
-.ns_card_container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 24px;
-	width: 100%;
-}
-
-.ns_section_cards_link_container {
-	margin-top: 48px;
-	width: 100%;
-	text-align: center;
-}
-
-.ns_description {
-	text-align: center;
-	font-style: normal;
-	font-weight: inherit;
-	font-size: 16px;
-	font-family: inherit;
-	line-height: inherit;
-	margin-bottom: 16px;
+.ns_section_cards_holder {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.ns_section_cards_title_container {
+	margin-bottom: 32px;
+}
+
+.ns_card_container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 24px;
+	width: 100%;
+}
+
+.ns_section_cards_link_container {
+	margin-top: 48px;
+	width: 100%;
+	text-align: center;
+}
+
+.ns_description {
+	text-align: center;
+	font-style: normal;
+	font-weight: inherit;
+	font-size: 16px;
+	font-family: inherit;
+	line-height: inherit;
+	margin-bottom: 16px;
 }