namirasoft-site-react 1.4.554 → 1.4.556

package/src/components/NSSectionCards.tsx

@@ -1,52 +1,52 @@
-import Styles from './NSSectionCards.module.css';
-import { NSTitle } from './NSTitle';
-import { NSCard, NSCardProps } from './NSCard';
-import { NSSection } from './NSSection';
-import { NSLinkBlue } from './NSLinkBlue';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from '../props/ILinkProps';
-
-export interface NSSectionCardsProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: {
-		text: string,
-		color?: string
-	};
-	button?: ILinkProps;
-	cards: NSCardProps[];
-}
-
-export function NSSectionCards(props: NSSectionCardsProps) 
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
-				{
-					props.title &&
-					<div className={Styles.ns_section_cards_title_container}>
-						<NSTitle title={props.title} />
-						{
-							props.description &&
-							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
-						}
-					</div>
-				}
-				<div className={` ${Styles.ns_card_container}`}>
-					{
-						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
-					}
-				</div>
-				{
-					props.button &&
-					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
-						<NSLinkBlue {...props.button} />
-					</div>
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionCards.module.css';
+import { NSTitle } from './NSTitle';
+import { NSCard, NSCardProps } from './NSCard';
+import { NSSection } from './NSSection';
+import { NSLinkBlue } from './NSLinkBlue';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from '../props/ILinkProps';
+
+export interface NSSectionCardsProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: {
+		text: string,
+		color?: string
+	};
+	button?: ILinkProps;
+	cards: NSCardProps[];
+}
+
+export function NSSectionCards(props: NSSectionCardsProps) 
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+				{
+					props.title &&
+					<div className={Styles.ns_section_cards_title_container}>
+						<NSTitle title={props.title} />
+						{
+							props.description &&
+							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
+						}
+					</div>
+				}
+				<div className={` ${Styles.ns_card_container}`}>
+					{
+						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
+					}
+				</div>
+				{
+					props.button &&
+					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
+						<NSLinkBlue {...props.button} />
+					</div>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionTiles.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/NSSectionTiles.tsx

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

package/src/components/NSSectionTitle.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from 'react';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSSection } from './NSSection';
-import { NSTitle } from './NSTitle';
-
-export interface NSSectionTitleProps extends IBaseComponentProps
-{
-	title: string;
-	children: ReactNode
-}
-
-export function NSSectionTitle(props: NSSectionTitleProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSTitle title={props.title} />
-			{props.children}
-		</NSSection>
-	);
+import { ReactNode } from 'react';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSSection } from './NSSection';
+import { NSTitle } from './NSTitle';
+
+export interface NSSectionTitleProps extends IBaseComponentProps
+{
+	title: string;
+	children: ReactNode
+}
+
+export function NSSectionTitle(props: NSSectionTitleProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSTitle title={props.title} />
+			{props.children}
+		</NSSection>
+	);
 }

package/src/components/NSSpace.tsx

@@ -1,29 +1,29 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSSpaceProps extends IBaseComponentProps
-{
-	size: NSSpaceSizeType;
-}
-
-export enum NSSpaceSizeType
-{
-	NANO = "4px",
-	MICRO = "8px",
-	MINI = "16px",
-	SMALL = "24px",
-	MEDUIM = "32px",
-	NORMAL = "48px",
-	LARGE = "64px",
-	XLARGE = "80px",
-	XXLARGE = "96px",
-	XXXLARGE = "128px",
-}
-
-export function NSSpace(props: NSSpaceProps)
-{
-	return (
-		<hr id={props.id}
-			className={props.classList?.join(" ") ?? ""}
-			style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSSpaceProps extends IBaseComponentProps
+{
+	size: NSSpaceSizeType;
+}
+
+export enum NSSpaceSizeType
+{
+	NANO = "4px",
+	MICRO = "8px",
+	MINI = "16px",
+	SMALL = "24px",
+	MEDUIM = "32px",
+	NORMAL = "48px",
+	LARGE = "64px",
+	XLARGE = "80px",
+	XXLARGE = "96px",
+	XXXLARGE = "128px",
+}
+
+export function NSSpace(props: NSSpaceProps)
+{
+	return (
+		<hr id={props.id}
+			className={props.classList?.join(" ") ?? ""}
+			style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
+	);
 }

package/src/components/NSSplitter.module.css

@@ -1,59 +1,59 @@
-.ns_splitter_gutter {
-    display: none;
-}
-
-@media only screen and (min-width: 992px) {
-    .ns_splitter {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    .ns_splitter.ns_splitter_resizing,
-    .ns_splitter.ns_splitter_resizing * {
-        cursor: row-resize !important;
-    }
-
-    .ns_splitter_master,
-    .ns_splitter_detail {
-        overflow: hidden;
-    }
-
-    .ns_splitter_gutter {
-        position: relative;
-        width: 100%;
-        outline: none;
-        border: none;
-        padding: 0.5rem 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: transparent;
-        cursor: row-resize !important;
-        z-index: 1
-    }
-
-    .ns_splitter_gutter::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 100%;
-        height: 0.25rem;
-        border-radius: 0.125rem;
-        background: #f0f0f0;
-        z-index: -1;
-    }
-
-    .ns_splitter_gutter_handle {
-        width: 2rem;
-        height: 0.5rem;
-        border-radius: 0.25rem;
-        background-color: #aaa;
-    }
-
-    .ns_splitter_gutter:hover .ns_splitter_gutter_handle {
-        background-color: #888;
-    }
+.ns_splitter_gutter {
+    display: none;
+}
+
+@media only screen and (min-width: 992px) {
+    .ns_splitter {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .ns_splitter.ns_splitter_resizing,
+    .ns_splitter.ns_splitter_resizing * {
+        cursor: row-resize !important;
+    }
+
+    .ns_splitter_master,
+    .ns_splitter_detail {
+        overflow: hidden;
+    }
+
+    .ns_splitter_gutter {
+        position: relative;
+        width: 100%;
+        outline: none;
+        border: none;
+        padding: 0.5rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: transparent;
+        cursor: row-resize !important;
+        z-index: 1
+    }
+
+    .ns_splitter_gutter::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 100%;
+        height: 0.25rem;
+        border-radius: 0.125rem;
+        background: #f0f0f0;
+        z-index: -1;
+    }
+
+    .ns_splitter_gutter_handle {
+        width: 2rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background-color: #aaa;
+    }
+
+    .ns_splitter_gutter:hover .ns_splitter_gutter_handle {
+        background-color: #888;
+    }
 }

package/src/components/NSSplitter.tsx

@@ -1,96 +1,96 @@
-import { Component, createRef, ReactNode } from "react";
-import Styles from "./NSSplitter.module.css";
-
-export interface NSSplitterProps
-{
-    master_content?: ReactNode;
-    detail_content?: ReactNode;
-}
-
-export class NSSplitter extends Component<NSSplitterProps>
-{
-    private SplitterRef = createRef<HTMLElement>();
-    private MasterPaneRef = createRef<HTMLDivElement>();
-    private DetailPaneRef = createRef<HTMLDivElement>();
-    private AnimationFrame: number | null = null;
-
-    constructor(props: NSSplitterProps)
-    {
-        super(props);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-    }
-
-    handleMouseDown()
-    {
-        this.SplitterRef.current?.addEventListener("mousemove", this.handleMouseMove);
-        this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
-        window.addEventListener("mouseup", this.handleMouseUp);
-    }
-
-    handleMouseUp()
-    {
-        this.SplitterRef.current?.removeEventListener("mousemove", this.handleMouseMove);
-        this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
-        window.removeEventListener("mouseup", this.handleMouseUp)
-    }
-
-    handleMouseMove(event: MouseEvent)
-    {
-        if (this.AnimationFrame) return;
-
-        this.AnimationFrame = requestAnimationFrame(() =>
-        {
-            this.AnimationFrame = null;
-
-            let splitter_el = this.SplitterRef.current;
-            let master_el = this.MasterPaneRef.current;
-
-            if (!splitter_el || !master_el) return;
-
-            let delta = event.clientY - master_el.getBoundingClientRect().bottom;
-            let master_el_height = master_el.clientHeight + delta - 12;
-            master_el_height = +Math.max(238, Math.min(master_el_height, 538)).toFixed(0);
-
-            master_el.style.height = master_el_height + "px";
-            master_el.style.minHeight = master_el_height + "px";
-        });
-    }
-
-    override render()
-    {
-        return (
-            <section
-                ref={this.SplitterRef}
-                className={Styles.ns_splitter}
-            >
-                <div
-                    ref={this.MasterPaneRef}
-                    className={Styles.ns_splitter_master}
-                >
-                    {this.props.master_content}
-                </div>
-
-                {
-                    this.props.detail_content &&
-                    <>
-                        <button
-                            className={Styles.ns_splitter_gutter}
-                            onMouseDown={this.handleMouseDown}
-                        >
-                            <span className={Styles.ns_splitter_gutter_handle}></span>
-                        </button>
-
-                        <div
-                            ref={this.DetailPaneRef}
-                            className={Styles.ns_splitter_detail}
-                        >
-                            {this.props.detail_content}
-                        </div>
-                    </>
-                }
-            </section>
-        )
-    }
+import { Component, createRef, ReactNode } from "react";
+import Styles from "./NSSplitter.module.css";
+
+export interface NSSplitterProps
+{
+    master_content?: ReactNode;
+    detail_content?: ReactNode;
+}
+
+export class NSSplitter extends Component<NSSplitterProps>
+{
+    private SplitterRef = createRef<HTMLElement>();
+    private MasterPaneRef = createRef<HTMLDivElement>();
+    private DetailPaneRef = createRef<HTMLDivElement>();
+    private AnimationFrame: number | null = null;
+
+    constructor(props: NSSplitterProps)
+    {
+        super(props);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+    }
+
+    handleMouseDown()
+    {
+        this.SplitterRef.current?.addEventListener("mousemove", this.handleMouseMove);
+        this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
+        window.addEventListener("mouseup", this.handleMouseUp);
+    }
+
+    handleMouseUp()
+    {
+        this.SplitterRef.current?.removeEventListener("mousemove", this.handleMouseMove);
+        this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
+        window.removeEventListener("mouseup", this.handleMouseUp)
+    }
+
+    handleMouseMove(event: MouseEvent)
+    {
+        if (this.AnimationFrame) return;
+
+        this.AnimationFrame = requestAnimationFrame(() =>
+        {
+            this.AnimationFrame = null;
+
+            let splitter_el = this.SplitterRef.current;
+            let master_el = this.MasterPaneRef.current;
+
+            if (!splitter_el || !master_el) return;
+
+            let delta = event.clientY - master_el.getBoundingClientRect().bottom;
+            let master_el_height = master_el.clientHeight + delta - 12;
+            master_el_height = +Math.max(238, Math.min(master_el_height, 538)).toFixed(0);
+
+            master_el.style.height = master_el_height + "px";
+            master_el.style.minHeight = master_el_height + "px";
+        });
+    }
+
+    override render()
+    {
+        return (
+            <section
+                ref={this.SplitterRef}
+                className={Styles.ns_splitter}
+            >
+                <div
+                    ref={this.MasterPaneRef}
+                    className={Styles.ns_splitter_master}
+                >
+                    {this.props.master_content}
+                </div>
+
+                {
+                    this.props.detail_content &&
+                    <>
+                        <button
+                            className={Styles.ns_splitter_gutter}
+                            onMouseDown={this.handleMouseDown}
+                        >
+                            <span className={Styles.ns_splitter_gutter_handle}></span>
+                        </button>
+
+                        <div
+                            ref={this.DetailPaneRef}
+                            className={Styles.ns_splitter_detail}
+                        >
+                            {this.props.detail_content}
+                        </div>
+                    </>
+                }
+            </section>
+        )
+    }
 }