namirasoft-site-react 1.2.51 → 1.2.54

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
+export * from "./components/NSEntityBar";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSInputDate";
@@ -19,10 +20,15 @@ export * from "./components/NSLayout";
 export * from "./components/NSLayoutHeroBanner";
 export * from "./components/NSLayoutTitle";
 export * from "./components/NSSelectBox";
+export * from "./components/NSSection";
+export * from "./components/NSSectionBars";
+export * from "./components/NSSectionCards";
+export * from "./components/NSSectionTitle";
+export * from "./components/NSLinkBlue";
 export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";
+export * from "./components/NSMap";
 export * from "./components/NSPagination";
 export * from "./components/NSTable";
+export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
-export * from "./components/NSBoxSection";
-export * from "./components/NSBoxPosition";

package/dist/main.js

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
+export * from "./components/NSEntityBar";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSInputDate";
@@ -19,11 +20,16 @@ export * from "./components/NSLayout";
 export * from "./components/NSLayoutHeroBanner";
 export * from "./components/NSLayoutTitle";
 export * from "./components/NSSelectBox";
+export * from "./components/NSSection";
+export * from "./components/NSSectionBars";
+export * from "./components/NSSectionCards";
+export * from "./components/NSSectionTitle";
+export * from "./components/NSLinkBlue";
 export * from "./components/NSLinkGreen";
 export * from "./components/NSLinkRed";
+export * from "./components/NSMap";
 export * from "./components/NSPagination";
 export * from "./components/NSTable";
+export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
-export * from "./components/NSBoxSection";
-export * from "./components/NSBoxPosition";
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/dist/types/Background.d.ts

@@ -0,0 +1,5 @@
+export interface Background {
+    image?: string;
+    color?: string;
+    position?: string;
+}

package/dist/types/Background.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Background.js.map

package/dist/types/Background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../src/types/Background.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,26 +1,29 @@
 {
     "name": "namirasoft-site-react",
-    "version": "1.2.51",
+    "version": "1.2.54",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",
     "dependencies": {
-        "@types/node": "^20.11.24",
-        "@types/react": "^18.2.62",
-        "@types/react-dom": "^18.2.19",
-        "antd": "^5.15.0",
+        "@types/leaflet": "^1.9.8",
+        "@types/node": "^20.11.28",
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@types/react-leaflet": "^3.0.0",
+        "antd": "^5.15.2",
         "bootstrap": "^5.3.3",
+        "leaflet": "^1.9.4",
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.2.3",
-        "namirasoft-core": "^1.2.13",
-        "namirasoft-site-react": "^1.2.50",
+        "namirasoft-core": "^1.2.16",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",
         "react-bootstrap": "^2.10.1",
         "react-dom": "^18.2.0",
+        "react-leaflet": "^4.2.1",
         "react-phone-input-2": "^2.15.1",
         "react-phone-number-input": "^3.3.9",
-        "react-router-dom": "^6.22.2",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1"
     },
     "scripts": {
@@ -51,4 +54,4 @@
     "devDependencies": {
         "copyfiles": "^2.4.1"
     }
-}
+}

package/src/App.tsx

@@ -16,7 +16,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { NSButtonRed } from './components/NSButtonRed';
 // import { NSSelectBox } from './components/NSSelectBox';
 // import { type SelectProps } from 'antd';
-import { NSBoxSection, NSLayout, NSPagination } from './main';
+import { NSLayout, NSPagination } from './main';
 // import { NSBoxPosition } from './components/NSBoxPosition';
 // import { NSBoxSection } from './components/NSBoxSection';
 
@@ -68,7 +68,6 @@ export function App()
                     <NSPagination page={1} size={25} />
                 </div>
                 {/* <NSBoxPosition image='' title='' list='' percent='' information='' /> */}
-                <NSBoxSection detail='detail' image='' description='desc' />
             </NSLayout>
         </div>
     );

package/src/components/NSCard.module.css

@@ -9,6 +9,8 @@
 	box-shadow: 0 2px 10px 4px #00000040;
 	padding: 24px;
 	border-radius: 24px;
+	width: 100%;
+	max-width: 358px;
 }
 
 .ns_card_detail_container {
@@ -23,6 +25,9 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: flex-start;
+	gap: 24px;
+	margin-bottom: 16px;
+	width: 100%;
 }
 
 .card_img {
@@ -34,11 +39,12 @@
 
 .card_title {
 	font-style: normal;
-	font-size: 24;
+	font-size: 24px;
 	font-weight: 700;
 	line-height: normal;
 	color: inherit;
 	text-align: inherit;
+	color: #141161;
 }
 
 .card_description {
@@ -65,6 +71,9 @@
 	width: 100%;
 	max-width: 310px;
 }
+.ns_card_link_container { 
+	width: 100%;
+}
 
 @media only screen and (min-width: 576px) {
 	.ns_card {

package/src/components/NSCard.tsx

@@ -4,7 +4,7 @@ import { Component } from 'react';
 
 import Styles from './NSCard.module.css'
 
-interface IProps
+export interface NSCardProps
 {
 	title: string;
 	description?: string;
@@ -20,31 +20,31 @@ interface IProps
 	}
 }
 
-interface IStart
-{ }
-
-export class NSCard extends Component<IProps, IStart> {
+export class NSCard extends Component<NSCardProps> {
 	override render()
 	{
-		const { title, image, description, link } = this.props;
 		return (
 			<>
 				<article className={Styles.ns_card}>
 					<div className={Styles.ns_card_detail_container}>
-						<div className={Styles.ns_card_title_img}>
+						<div className={Styles.ns_card_title_img} style={{ alignItems: this.props.description ? "flex-start" : "center" }}>
+							<img className={Styles.card_img} src={this.props.image.src} alt={this.props.image.alt} />
 							<h3 className={Styles.card_title}>
-								{title}
+								{this.props.title}
 							</h3>
-							<img className={Styles.card_img} src={image.src} alt={image.alt} />
 						</div>
-						<p className={Styles.card_description}>
-							{description}
-						</p>
+
+						{this.props.description &&
+							<p className={Styles.card_description}>
+								{this.props.description}
+							</p>
+						}
+
 					</div>
-					{link &&
-						<div >
-							<a className={Styles.ns_card_link} href={link.href} target={link.target ?? "_self"} >
-								{link.text}
+					{this.props.link &&
+						<div className={Styles.ns_card_link_container}>
+							<a className={Styles.ns_card_link} href={this.props.link.href} target={this.props.link.target ?? "_self"} >
+								{this.props.link.text}
 							</a>
 						</div>
 					}

package/src/components/NSEntityBar.module.css

@@ -0,0 +1,53 @@
+.entity_bar_item {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	gap: 24px;
+	padding: 24px;
+	box-shadow: 0 2px 10px 4px #00000040;
+	width: 100%;
+	max-width: 358px;
+}
+
+.entity_bar_image_container { 
+	width: 100%;
+}
+
+.entity_bar_details_container {
+	text-align: start;
+}
+
+.entity_bar_image_title {
+	color: #001664;
+	font-size: 32px;
+	font-weight: 700;
+	line-height: 32px;
+	margin-bottom: 16px;
+	text-align: start;
+}
+
+.entity_bar_image_description {
+
+	color: #001664;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	text-align: justify;
+}
+
+@media only screen and (min-width: 992px) {
+	.entity_bar_item {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: flex-start;
+		gap: 48px;
+		width: 100%;
+		max-width: 1170px;
+	}
+
+	.entity_bar_details_container {
+		padding: 24px 0;
+	}
+}

package/src/components/NSEntityBar.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Component } from 'react';
+
+import Styles from './NSEntityBar.module.css'
+
+export interface NSEntityBarProps
+{
+	title: string;
+	description: string;
+	image: {
+		src: string;
+		alt: string;
+	},
+}
+
+export class NSEntityBar extends Component<NSEntityBarProps> {
+	override render()
+	{
+		return (
+			<article className={Styles.entity_bar_item}>
+				<figure className={Styles.entity_bar_image_container}>
+					<img src={this.props.image.src} alt={this.props.image.alt} width={310} height={240} />
+				</figure>
+				<div className={Styles.entity_bar_details_container}>
+					<h3 className={Styles.entity_bar_image_title}> {this.props.title} </h3>
+					<p className={Styles.entity_bar_image_description} > {this.props.description} </p>
+				</div>
+			</article>
+		);
+	}
+}

package/src/components/NSLayoutTitle.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Component } from 'react';
 
 import { ReactNode } from 'react';
 import { NSLayout } from './NSLayout';
@@ -12,15 +13,17 @@ interface IProps
 	children: ReactNode;
 }
 
-export function NSLayoutTitle(props: IProps)
-{
-	return (
-		<NSLayout scope={props.scope} logo={props.logo} >
-			<div>
-				<h1 className='text-black text-center'>{props.title}</h1>
-				<p className='text-black page-description'>{props.description}</p>
-			</div>
-			{props.children}
-		</NSLayout>
-	);
+export class NSLayoutTitle extends Component<IProps> {
+	override render()
+	{
+		return (
+			<NSLayout scope={this.props.scope} logo={this.props.logo} >
+				<div>
+					<h1 className='text-black text-center'>{this.props.title}</h1>
+					<p className='text-black page-description'>{this.props.description}</p>
+				</div>
+				{this.props.children}
+			</NSLayout>
+		);
+	}
 }

package/src/components/NSLinkBlue.module.css

@@ -0,0 +1,24 @@
+.ns_link_parent {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 24px;
+}
+
+.ns_link_parent a {
+	text-decoration: none;
+	background-color: #366EFF;
+	color: #fff;
+	font-size: 16px;
+	font-weight: 400;
+	height: 48px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	max-width: 358px;
+	padding: 12px 64px;
+	border-radius: 24px;
+	width: 256px;
+}

package/src/components/NSLinkBlue.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Styles from "./NSLinkblue.module.css";
+import React from "react";
+
+interface IProps
+{
+	title: string;
+	href: string;
+	style?: React.CSSProperties;
+}
+
+interface IState
+{
+	title: string;
+	href: string;
+}
+
+export class NSLinkBlue extends React.Component<IProps, IState>
+{
+	constructor(props: IProps)
+	{
+		super(props);
+		this.state = { title: props.title, href: props.href };
+	}
+	setTitle(title: string)
+	{
+		this.setState({ title });
+	}
+	setHRef(href: string)
+	{
+		this.setState({ href });
+	}
+	override render()
+	{
+		return (
+
+			<div className={Styles.ns_link_parent} style={this.props.style}>
+				<a className="text-white text-decoration-none" href={this.state.href}>
+					{this.state.title}
+				</a>
+			</div>
+		)
+	}
+}

package/src/components/NSMap.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import React from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import IconLocation from '../assets/images/map_location.png';
+const locationIcon = L.icon({
+	iconUrl: IconLocation,
+	iconSize: [24, 24],
+	iconAnchor: [12, 41],
+	popupAnchor: [1, -34],
+});
+
+
+interface NSMapProps
+{
+	location: {
+		name: string;
+		latitude: number;
+		longitude: number;
+	}
+}
+
+export class NSMap extends React.Component<NSMapProps> {
+	override render()
+	{
+		return (
+			<MapContainer center={[this.props.location.latitude, this.props.location.longitude]} zoom={13} style={{ height: '400px', width: '100%' }}>
+				<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+				<Marker position={[this.props.location.latitude, this.props.location.longitude]} icon={locationIcon}>
+					<Popup>
+						{this.props.location.name}
+					</Popup>
+				</Marker>
+			</MapContainer>
+		);
+	}
+}

package/src/components/NSSection.module.css

@@ -0,0 +1,10 @@
+.ns_section {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+
+.ns_section_whitespace {
+	padding-bottom: 48px;
+	padding-top: 48px;
+}

package/src/components/NSSection.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { Component, ReactNode } from "react";
+import Styles from './NSSection.module.css'
+import { Background } from "../types/Background";
+interface NSSectionProps
+{
+	children: ReactNode;
+	background?: Background;
+	padding_bottom?: string
+}
+
+interface NSSectionState
+{
+	background?: Background;
+}
+
+class NSSection extends Component<NSSectionProps, NSSectionState> {
+	constructor(props: NSSectionProps)
+	{
+		super(props);
+		this.state = {
+			background: { 
+				image: `url(${props.background?.image})`,
+				color: props.background?.color,
+				position: props.background?.position
+			}
+		}
+	}
+	override render()
+	{
+		return (
+			<section style=
+				{{
+					backgroundImage: this.state.background?.image,
+					backgroundColor: this.state.background?.color,
+					backgroundPosition : this.state.background?.position
+				}}
+				className={Styles.ns_section} >
+				<div style={{ paddingBottom: this.props.padding_bottom }}
+					className={`${Styles.ns_section_whitespace}`}>
+					{this.props.children}
+				</div>
+			</section>
+		);
+	}
+}
+
+export default NSSection;

package/src/components/NSSectionBars.module.css

@@ -0,0 +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;
+}

package/src/components/NSSectionBars.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Component } from 'react';
+
+import Styles from './NSSectionBars.module.css';
+
+import { NSEntityBar, NSEntityBarProps } from './NSEntityBar';
+import NSSection from './NSSection';
+import { Background } from '../types/Background';
+// import { NSLinkBlue } from './NSLinkBlue';
+
+interface NSSectionBarsProps
+{
+	background?: Background;
+	bars: NSEntityBarProps[]
+}
+
+class NSSectionBars extends Component<NSSectionBarsProps> {
+	override render()
+	{
+		return (
+			<>
+				<NSSection background={this.props.background} >
+					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+						{
+							this.props.bars?.map((bar) => <NSEntityBar  {...bar} />)
+						}
+					</div>
+				</NSSection>
+			</>
+		);
+	}
+}
+
+export default NSSectionBars;

package/src/components/NSSectionCards.module.css

@@ -0,0 +1,38 @@
+.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: 48px;
+	width: 100%;
+}
+
+.ns_section_cards_link_container {
+	margin-top: 48px;
+	width: 100%;
+	text-align: center;
+}
+
+.description {
+	font-style: normal;
+	font-weight: initial;
+	font-size: 16px;
+	font-family: initial;
+	line-height: initial;
+	margin-bottom: 16px;
+}