namirasoft-site-react 1.5.16 → 1.5.18

package/src/components/NSProductSearch.module.css

@@ -1,74 +1,74 @@
-.ns_product_search_column_domain {
-    width: 100%;
-    gap: 0px;
-}
-
-.ns_product_search_column_link {
-    width: 100%;
-    gap: 0px;
-}
-
-.ns_product_search_item_domain_parent {
-    width: 100%;
-    display: flex;
-    gap: 0px;
-    flex-direction: column;
-}
-
-.ns_product_search_item_domain {
-    width: 100%;
-    height: 48px;
-    text-decoration: none !important;
-    transition: box-shadow 0.3s ease;
-    border-radius: 12px;
-    padding: 0px 16px;
-    display: flex;
-    align-items: center;
-}
-
-.ns_product_search_item_domain:hover {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
-}
-
-.ns_product_search_item_link_parent {
-    width: 100%;
-    display: flex;
-    gap: 4px;
-    flex-direction: column;
-}
-
-.ns_product_search_item_link {
-    height: max-content;
-    text-decoration: none !important;
-    transition: box-shadow 0.3s ease;
-    padding: 16px;
-    border-radius: 12px;
-    border: 1px solid rgb(236, 236, 236);
-}
-
-.ns_product_search_item_link p {
-    padding: 0px;
-    margin: 0px;
-    color: black;
-    text-decoration: none !important;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-clamp: inherit;
-    -webkit-line-clamp: 3;
-}
-
-.ns_product_search_item_link:hover {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
-}
-
-@media (min-width: 1024px) {
-    .ns_product_search_column_domain {
-        height: 100%;
-        width: 272px;
-    }
-
-    .ns_product_search_column_link {
-        width: 560px;
-    }
+.ns_product_search_column_domain {
+    width: 100%;
+    gap: 0px;
+}
+
+.ns_product_search_column_link {
+    width: 100%;
+    gap: 0px;
+}
+
+.ns_product_search_item_domain_parent {
+    width: 100%;
+    display: flex;
+    gap: 0px;
+    flex-direction: column;
+}
+
+.ns_product_search_item_domain {
+    width: 100%;
+    height: 48px;
+    text-decoration: none !important;
+    transition: box-shadow 0.3s ease;
+    border-radius: 12px;
+    padding: 0px 16px;
+    display: flex;
+    align-items: center;
+}
+
+.ns_product_search_item_domain:hover {
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
+}
+
+.ns_product_search_item_link_parent {
+    width: 100%;
+    display: flex;
+    gap: 4px;
+    flex-direction: column;
+}
+
+.ns_product_search_item_link {
+    height: max-content;
+    text-decoration: none !important;
+    transition: box-shadow 0.3s ease;
+    padding: 16px;
+    border-radius: 12px;
+    border: 1px solid rgb(236, 236, 236);
+}
+
+.ns_product_search_item_link p {
+    padding: 0px;
+    margin: 0px;
+    color: black;
+    text-decoration: none !important;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: inherit;
+    -webkit-line-clamp: 3;
+}
+
+.ns_product_search_item_link:hover {
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
+}
+
+@media (min-width: 1024px) {
+    .ns_product_search_column_domain {
+        height: 100%;
+        width: 272px;
+    }
+
+    .ns_product_search_column_link {
+        width: 560px;
+    }
 }

package/src/components/NSProductSearch.tsx

@@ -1,194 +1,194 @@
-"use client";
-
-import React from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { DomainRow, LinkFullRow, NamirasoftAPILinkServer } from "namirasoft-api-link";
-import { EnvService } from "namirasoft-core";
-import { NSLoading } from "./NSLoading";
-import { NSSection } from "./NSSection";
-import { NSColumn } from "./NSColumn";
-import { NSRow } from "./NSRow";
-import { NSTitle } from "./NSTitle";
-import { NSLine } from "./NSLine";
-import { NSSpace, NSSpaceSizeType } from "./NSSpace";
-import Styles from "./NSProductSearch.module.css";
-
-export interface NSProductSearchProps extends IBaseComponentProps
-{
-	search: string;
-}
-
-export interface NSProductSearchState
-{
-	domains: DomainRow[] | null;
-	links: LinkFullRow[] | null;
-}
-
-export class NSProductSearch extends React.Component<NSProductSearchProps, NSProductSearchState>
-{
-	constructor(props: NSProductSearchProps)
-	{
-		super(props);
-		this.state = {
-			domains: null,
-			links: null
-		};
-	}
-	reload(search: string)
-	{
-		this.setState({ domains: null, links: null });
-		let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK").getString();
-		let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, console.error);
-		server.domain.Search(search, 10).then(res =>
-		{
-			this.setState({ domains: res.rows });
-		}).catch(() => { });
-		server.link.Search(search, 10).then(res =>
-		{
-			this.setState({ links: res.rows });
-		}).catch(() => { });
-	}
-	override componentDidMount()
-	{
-		this.reload(this.props.search);
-	}
-	override render()
-	{
-		let domains;
-		let links;
-		if (this.state.domains)
-		{
-			let more_domains = [];
-			if (this.state.links)
-			{
-				let ds = this.state.links.map(l => l.domain);
-				for (let i = 0; i < ds.length; i++)
-				{
-					if (this.state.domains.filter(d => d.id === ds[i].id).length === 0 && more_domains.filter(d => d.id === ds[i].id).length === 0)
-						more_domains.push(ds[i]);
-				}
-			}
-			let render_domain = (domain: DomainRow) =>
-			{
-				return <a href={domain.url} className={Styles.ns_product_search_item_domain}>
-					<div>
-						<img
-							src={domain.logo ?? ""}
-							alt={domain.name}
-							width={24}
-							height={24}
-							style={{ marginRight: "8px" }}
-						/>
-						{domain.name}
-					</div>
-				</a>;
-			};
-
-			domains = <>
-				<NSTitle
-					title="Domains"
-					style={{ margin: "0px" }}
-				/>
-				<NSSpace
-					size={NSSpaceSizeType.MICRO}
-				/>
-				<NSLine />
-				<NSSpace
-					size={NSSpaceSizeType.MINI}
-				/>
-				<div className={Styles.ns_product_search_item_domain_parent}>
-					{
-						this.state.domains.map(render_domain)
-					}
-				</div>
-				{
-					more_domains.length > 0 &&
-					<>
-						<NSTitle
-							title="More"
-							style={{ margin: "0px" }}
-						/>
-						<NSSpace
-							size={NSSpaceSizeType.MICRO}
-						/>
-						<NSLine />
-						<NSSpace
-							size={NSSpaceSizeType.MICRO}
-						/>
-						<div className={Styles.ns_product_search_item_domain_parent}>
-							{
-								more_domains.map(render_domain)
-							}
-						</div>
-					</>
-				}
-			</>;
-		}
-		else
-			domains = <NSLoading
-				small
-			/>;
-
-		if (this.state.links)
-			links = <>
-
-				<NSTitle
-					title="Links"
-					style={{ margin: "0px" }}
-				/>
-				<NSSpace
-					size={NSSpaceSizeType.MICRO}
-				/>
-				<NSLine />
-				<NSSpace
-					size={NSSpaceSizeType.MINI}
-				/>
-				<div className={Styles.ns_product_search_item_link_parent}>
-					{
-						this.state.links.map(link =>
-						(
-							<a href={link.url} className={Styles.ns_product_search_item_link}>
-								<div>
-									<img
-										src={link.logo ?? ""}
-										alt={link.name}
-										width={48}
-										height={48}
-										style={{ marginRight: "8px" }}
-									/>
-									{`${link.name} (${link.domain?.name})`}
-									<p>
-										{ }
-									</p>
-									<p>
-										{link.description}
-									</p>
-								</div>
-							</a>
-						))
-					}
-				</div>
-			</>;
-		else
-			links = <NSLoading
-				small
-			/>
-
-		return <>
-			<NSSection>
-				<NSRow>
-					<NSColumn
-						classList={[Styles.ns_product_search_column_domain]}
-					>
-						{domains}
-					</NSColumn>
-					<NSColumn
-						classList={[Styles.ns_product_search_column_link]}
-					>
-						{links}
-					</NSColumn>
-				</NSRow>
-			</NSSection >
-		</>;
-	}
+"use client";
+
+import React from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { DomainRow, LinkFullRow, NamirasoftAPILinkServer } from "namirasoft-api-link";
+import { EnvService } from "namirasoft-core";
+import { NSLoading } from "./NSLoading";
+import { NSSection } from "./NSSection";
+import { NSColumn } from "./NSColumn";
+import { NSRow } from "./NSRow";
+import { NSTitle } from "./NSTitle";
+import { NSLine } from "./NSLine";
+import { NSSpace, NSSpaceSizeType } from "./NSSpace";
+import Styles from "./NSProductSearch.module.css";
+
+export interface NSProductSearchProps extends IBaseComponentProps
+{
+	search: string;
+}
+
+export interface NSProductSearchState
+{
+	domains: DomainRow[] | null;
+	links: LinkFullRow[] | null;
+}
+
+export class NSProductSearch extends React.Component<NSProductSearchProps, NSProductSearchState>
+{
+	constructor(props: NSProductSearchProps)
+	{
+		super(props);
+		this.state = {
+			domains: null,
+			links: null
+		};
+	}
+	reload(search: string)
+	{
+		this.setState({ domains: null, links: null });
+		let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK").getString();
+		let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, console.error);
+		server.domain.Search(search, 10).then(res =>
+		{
+			this.setState({ domains: res.rows });
+		}).catch(() => { });
+		server.link.Search(search, 10).then(res =>
+		{
+			this.setState({ links: res.rows });
+		}).catch(() => { });
+	}
+	override componentDidMount()
+	{
+		this.reload(this.props.search);
+	}
+	override render()
+	{
+		let domains;
+		let links;
+		if (this.state.domains)
+		{
+			let more_domains = [];
+			if (this.state.links)
+			{
+				let ds = this.state.links.map(l => l.domain);
+				for (let i = 0; i < ds.length; i++)
+				{
+					if (this.state.domains.filter(d => d.id === ds[i].id).length === 0 && more_domains.filter(d => d.id === ds[i].id).length === 0)
+						more_domains.push(ds[i]);
+				}
+			}
+			let render_domain = (domain: DomainRow) =>
+			{
+				return <a href={domain.url} className={Styles.ns_product_search_item_domain}>
+					<div>
+						<img
+							src={domain.logo ?? ""}
+							alt={domain.name}
+							width={24}
+							height={24}
+							style={{ marginRight: "8px" }}
+						/>
+						{domain.name}
+					</div>
+				</a>;
+			};
+
+			domains = <>
+				<NSTitle
+					title="Domains"
+					style={{ margin: "0px" }}
+				/>
+				<NSSpace
+					size={NSSpaceSizeType.MICRO}
+				/>
+				<NSLine />
+				<NSSpace
+					size={NSSpaceSizeType.MINI}
+				/>
+				<div className={Styles.ns_product_search_item_domain_parent}>
+					{
+						this.state.domains.map(render_domain)
+					}
+				</div>
+				{
+					more_domains.length > 0 &&
+					<>
+						<NSTitle
+							title="More"
+							style={{ margin: "0px" }}
+						/>
+						<NSSpace
+							size={NSSpaceSizeType.MICRO}
+						/>
+						<NSLine />
+						<NSSpace
+							size={NSSpaceSizeType.MICRO}
+						/>
+						<div className={Styles.ns_product_search_item_domain_parent}>
+							{
+								more_domains.map(render_domain)
+							}
+						</div>
+					</>
+				}
+			</>;
+		}
+		else
+			domains = <NSLoading
+				small
+			/>;
+
+		if (this.state.links)
+			links = <>
+
+				<NSTitle
+					title="Links"
+					style={{ margin: "0px" }}
+				/>
+				<NSSpace
+					size={NSSpaceSizeType.MICRO}
+				/>
+				<NSLine />
+				<NSSpace
+					size={NSSpaceSizeType.MINI}
+				/>
+				<div className={Styles.ns_product_search_item_link_parent}>
+					{
+						this.state.links.map(link =>
+						(
+							<a href={link.url} className={Styles.ns_product_search_item_link}>
+								<div>
+									<img
+										src={link.logo ?? ""}
+										alt={link.name}
+										width={48}
+										height={48}
+										style={{ marginRight: "8px" }}
+									/>
+									{`${link.name} (${link.domain?.name})`}
+									<p>
+										{ }
+									</p>
+									<p>
+										{link.description}
+									</p>
+								</div>
+							</a>
+						))
+					}
+				</div>
+			</>;
+		else
+			links = <NSLoading
+				small
+			/>
+
+		return <>
+			<NSSection>
+				<NSRow>
+					<NSColumn
+						classList={[Styles.ns_product_search_column_domain]}
+					>
+						{domains}
+					</NSColumn>
+					<NSColumn
+						classList={[Styles.ns_product_search_column_link]}
+					>
+						{links}
+					</NSColumn>
+				</NSRow>
+			</NSSection >
+		</>;
+	}
 }

package/src/components/NSProgressBar.module.css

@@ -1,39 +1,39 @@
-.ns_progress_bar_wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.ns_progress_bar {
-    position: relative;
-    display: flex;
-    width: 17rem;
-    height: 1.5rem;
-    border: 1px solid #e1e1e1;
-    border-radius: 0.25rem;
-    background-color: #fff;
-    overflow: hidden;
-}
-
-.ns_progress_bar_title {
-    font-size: 0.875rem;
-    line-height: 1rem;
-    color: #141b5c;
-}
-
-.ns_progress {
-    background-color: rgba(0, 128, 0, 0.8);
-    width: 50%;
-    transition: width 0.3s ease;
-}
-
-.ns_progress_percent {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #141b5c;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1rem;
+.ns_progress_bar_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ns_progress_bar {
+    position: relative;
+    display: flex;
+    width: 17rem;
+    height: 1.5rem;
+    border: 1px solid #e1e1e1;
+    border-radius: 0.25rem;
+    background-color: #fff;
+    overflow: hidden;
+}
+
+.ns_progress_bar_title {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    color: #141b5c;
+}
+
+.ns_progress {
+    background-color: rgba(0, 128, 0, 0.8);
+    width: 50%;
+    transition: width 0.3s ease;
+}
+
+.ns_progress_percent {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #141b5c;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1rem;
 }

package/src/components/NSProgressBar.tsx

@@ -1,30 +1,30 @@
-import { Component } from 'react';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from "./NSProgressBar.module.css";
-
-export interface NSProgressBarProps extends IBaseComponentProps
-{
-    progress: number;
-    title?: string;
-}
-
-class NSProgressBar extends Component<NSProgressBarProps>
-{
-    override render()
-    {
-        let progress = Math.max(0, Math.min(this.props.progress, 100));
-        progress = Math.round(progress * 100) / 100;
-
-        return (
-            <div className={`${Styles.ns_progress_bar_wrapper} ${this.props.classList}`}>
-                <span className={Styles.ns_progress_bar_title}>{this.props.title}</span>
-                <div className={Styles.ns_progress_bar} style={this.props.style}>
-                    <div className={Styles.ns_progress} style={{ width: this.props.progress + "%" }}></div>
-                    <div className={Styles.ns_progress_percent}>{progress}%</div>
-                </div>
-            </div>
-        )
-    }
-}
-
+import { Component } from 'react';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from "./NSProgressBar.module.css";
+
+export interface NSProgressBarProps extends IBaseComponentProps
+{
+    progress: number;
+    title?: string;
+}
+
+class NSProgressBar extends Component<NSProgressBarProps>
+{
+    override render()
+    {
+        let progress = Math.max(0, Math.min(this.props.progress, 100));
+        progress = Math.round(progress * 100) / 100;
+
+        return (
+            <div className={`${Styles.ns_progress_bar_wrapper} ${this.props.classList}`}>
+                <span className={Styles.ns_progress_bar_title}>{this.props.title}</span>
+                <div className={Styles.ns_progress_bar} style={this.props.style}>
+                    <div className={Styles.ns_progress} style={{ width: this.props.progress + "%" }}></div>
+                    <div className={Styles.ns_progress_percent}>{progress}%</div>
+                </div>
+            </div>
+        )
+    }
+}
+
 export default NSProgressBar;