namirasoft-site-react 1.2.51 → 1.2.54

package/src/components/NSSectionCards.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Component } from 'react';
+
+import Styles from './NSSectionCards.module.css';
+import NSTitle from './NSTitle';
+import { NSCard, NSCardProps } from './NSCard';
+import NSSection from './NSSection';
+import { NSLinkBlue } from './NSLinkBlue';
+import { Background } from '../types/Background';
+
+interface NSSectionCardsProps
+{
+	title?: {
+		text: string,
+		color?: string
+	};
+	description?: {
+		text: string,
+		color?: string
+	};
+	background?: Background
+	button?: {
+		href: string;
+		title: string;
+	};
+	cards: NSCardProps[]
+}
+
+class NSSectionCards extends Component<NSSectionCardsProps> {
+	override render()
+	{
+		return (
+			<>
+				<NSSection background={this.props.background} >
+					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+
+						{
+							this.props.title &&
+							<div className={Styles.ns_section_cards_title_container}>
+								<NSTitle color={this.props.title?.color} title={this.props.title?.text} />
+
+								{
+									this.props.description &&
+									<p style={{ color: this.props.description?.color }} className={Styles.description}> {this.props.description.text} </p>
+								}
+
+							</div>
+						}
+
+						<div className={` ${Styles.ns_card_container}`}>
+							{
+								this.props.cards?.map((card) => <NSCard  {...card} />)
+							}
+						</div>
+						{
+							this.props.button &&
+							<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
+								<NSLinkBlue href={this.props.button?.href} title={this.props.button?.title} />
+							</div>
+						}
+					</div>
+				</NSSection>
+			</>
+		);
+	}
+}
+
+export default NSSectionCards;

package/src/components/NSSectionTitle.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { Component, ReactNode } from 'react';
+import NSSection from './NSSection';
+import NSTitle from './NSTitle';
+import { Background } from '../types/Background';
+
+interface NSSectionTitleProps
+{
+	title: {
+		text: string,
+		color?: string
+	};
+	background?: Background
+	padding_bottom?: string;
+	children: ReactNode
+}
+ 
+export default class NSSectionTitle extends Component<NSSectionTitleProps> {
+	override render() { 
+		return (  
+			<NSSection padding_bottom={this.props.padding_bottom} background={this.props.background} >
+				<NSTitle color={this.props.title.color} title={this.props.title.text} />
+				{this.props.children}
+			</NSSection>
+		);
+	}
+}

package/src/components/NSSelectBox.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import Styles from "./NSSelectBox.module.css";
 import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';
-import { CaretDownOutlined } from '@ant-design/icons'
+// import { CaretDownOutlined } from '@ant-design/icons'
 
 interface IProps
 {
@@ -36,11 +36,10 @@ export class NSSelectBox extends React.Component<IProps, IState> {
     }
     override render()
     {
-
         return (
             <div className={`${Styles.ns_input_parent} p-2`}>
                 <Select
-                    suffixIcon={<CaretDownOutlined />}
+                    // suffixIcon={<CaretDownOutlined />}
                     mode="multiple"
                     style={{ width: '100%' }}
                     className={Styles.ns_input_select}

package/src/components/NSTitle.module.css

@@ -0,0 +1,9 @@
+.ns_title {
+	font-size: 32px;
+	font-weight: 700;
+	line-height: normal;
+	color: #001664;
+	margin-bottom: 16px;
+	width: 100%;
+	text-align: center;
+}

package/src/components/NSTitle.tsx

@@ -0,0 +1,25 @@
+'use client'
+import { Component } from 'react';
+
+//Styles 
+import Styles from './NSTitle.module.css';
+
+interface NSTitleProps
+{
+	title: string;
+	color?: string;
+	text_align?: string;
+}
+class NSTitle extends Component<NSTitleProps> {
+	override render()
+	{
+		return (
+			//todo : fix text align
+			<h2 style={{ color: this.props.color, textAlign: this.props.text_align ? "start" : "center" }} className={`${Styles.ns_title}`}>
+				{this.props.title}
+			</h2>
+		);
+	}
+}
+
+export default NSTitle;

package/src/main.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/src/types/Background.ts

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

package/dist/components/NSBoxPosition.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface IProps {
-    image: string;
-    title: string;
-    list: string;
-    percent: string | number;
-    information: string | number;
-}
-interface IState {
-    image: string;
-    title: string;
-    list: string;
-    percent: string | number;
-    information: string | number;
-}
-export declare class NSBoxPosition extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};

package/dist/components/NSBoxPosition.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Style from "./NSBoxPosition.module.css";
-import React from "react";
-export class NSBoxPosition extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { title: props.title, image: props.image, list: props.list, percent: props.percent, information: props.information };
-    }
-    render() {
-        return (_jsx("div", Object.assign({ className: Style.position_box_contain }, { children: _jsxs("div", Object.assign({ className: Style.position_box_layout }, { children: [_jsx("img", { className: "rounded", src: this.state.image, alt: "wordpress", width: 326, height: 220 }), _jsxs("div", Object.assign({ className: Style.position_box_information }, { children: [_jsx("h3", { children: this.state.title }), _jsx("h4", { children: "Skills :" }), _jsx("ul", { children: _jsxs("li", { children: [this.state.list, _jsx("span", { children: this.props.percent })] }) }), _jsx("h4", { children: "Or" }), _jsx("ul", { children: _jsxs("li", { children: [this.state.list, _jsx("span", { children: this.props.percent })] }) }), _jsx("h3", { children: "Responsibility :" }), _jsx("p", { children: this.state.information })] }))] })) })));
-    }
-}
-//# sourceMappingURL=NSBoxPosition.js.map

package/dist/components/NSBoxPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSBoxPosition.js","sourceRoot":"","sources":["../../src/components/NSBoxPosition.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAyB;IAG9D,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IACtI,CAAC;IAEQ,MAAM;QAEX,OAAO,CACH,4BAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,gBACtC,6BAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,iBACrC,cAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAQ,EAC/F,6BAAK,SAAS,EAAE,KAAK,CAAC,wBAAwB,iBAC1C,uBAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,EAC3B,oCAAiB,EACjB,uBACI,yBAAK,IAAI,CAAC,KAAK,CAAC,IAAI,EAAC,yBAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,IAAK,GAC1D,EACL,8BAAW,EACX,uBACI,yBAAK,IAAI,CAAC,KAAK,CAAC,IAAI,EAAC,yBAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,IAAK,GAC1D,EACL,4CAAyB,EACzB,sBAAI,IAAI,CAAC,KAAK,CAAC,WAAW,GAAK,KAC7B,KACJ,IACJ,CACT,CAAA;IACL,CAAC;CACJ"}

package/dist/components/NSBoxPosition.module.css

@@ -1,81 +0,0 @@
-.position_box_contain {
-    width: 100%;
-    padding: 0 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.position_box_layout {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(20, 27, 92, 0.3);
-    width: 358px;
-    height: auto;
-    border-radius: 8px;
-    text-align: center;
-    gap: 16px;
-    margin: 12px 0;
-    padding: 16px 0;
-}
-
-.position_box_information {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
-    align-items: start;
-    text-align: left;
-    padding: 0 16px;
-    color: rgba(20, 27, 92, 1);
-}
-
-.position_box_information h3 {
-    font-size: 24px;
-    font-weight: 700;
-}
-
-.position_box_information h4 {
-    font-size: 16px;
-    font-weight: bold;
-    font-weight: 600;
-}
-
-.position_box_information ul {
-    width: 100%;
-}
-
-.position_box_information li {
-    text-decoration: underline;
-}
-
-.position_box_information span {
-    float: right;
-}
-
-@media only screen and (min-width:768px) {
-    .position_box_layout {
-        display: flex;
-        flex-direction: row;
-        justify-content: left;
-        width: 100%;
-        height: auto;
-    }
-
-    .position_box_contain {
-        padding: 0 48px;
-        display: flex;
-        justify-content: left;
-    }
-
-    .position_box_layout img {
-        width: 408px;
-        height: 276px;
-        padding: 0 16px;
-    }
-
-    .position_box_information {
-        line-height: 16px;
-    }
-}

package/dist/components/NSBoxSection.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface IProps {
-    detail: string;
-    image: string;
-    description: string;
-}
-interface IState {
-    detail: string;
-    image: string;
-    description: string;
-    toggle: boolean;
-}
-export declare class NSBoxSection extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    setTitle(description: string): void;
-    setHRef(detail: string): void;
-    setToggle(toggle: boolean): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};

package/dist/components/NSBoxSection.js

@@ -1,28 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-export class NSBoxSection extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { detail: props.detail, image: props.image, description: props.description, toggle: true };
-    }
-    setTitle(description) {
-        this.setState({ description });
-    }
-    setHRef(detail) {
-        this.setState({ detail });
-    }
-    setToggle(toggle) {
-        this.setState({ toggle });
-    }
-    render() {
-        return (_jsx("div", Object.assign({ className: 'position-contain' }, { children: _jsxs("div", Object.assign({ className: "position-layout" }, { children: [_jsx("img", { className: "rounded", src: this.state.image, alt: "wordpress", width: 326, height: 220 }), _jsxs("div", Object.assign({ className: 'position-information' }, { children: [_jsx("h3", Object.assign({ className: 'position-title', style: { display: this.state.toggle ? 'block' : 'none' } }, { children: "WordPress" })), _jsx("a", Object.assign({ href: "", onClick: (e) => {
-                                    this.setState({ toggle: !this.state.toggle });
-                                    e.preventDefault();
-                                } }, { children: _jsxs("h4", Object.assign({ className: 'position-readmore', style: { display: this.state.toggle ? 'block' : 'none' } }, { children: ["Read More", _jsx("img", { className: "mx-2", src: '/assets/images/position-down-vector.png', alt: "show-more", width: 16, height: 16 })] })) })), _jsxs("ul", Object.assign({ className: 'position-list', style: { display: this.state.toggle ? 'none' : 'block' } }, { children: [_jsx("li", { children: "Frontend Programming" }), _jsx("li", { children: "Backend Programming" })] })), _jsx("a", Object.assign({ href: "", onClick: (e) => {
-                                    this.setState({ toggle: !this.state.toggle });
-                                    e.preventDefault();
-                                } }, { children: _jsxs("h4", Object.assign({ style: { display: this.state.toggle ? 'none' : 'block' } }, { children: ["Read Less", _jsx("img", { className: "mx-2", src: '/assets/images/position-down-vector.png', alt: "show-more", style: { transform: "rotate(180deg" }, width: 16, height: 16 })] })) }))] }))] })) })));
-    }
-}
-//# sourceMappingURL=NSBoxSection.js.map

package/dist/components/NSBoxSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSBoxSection.js","sourceRoot":"","sources":["../../src/components/NSBoxSection.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSBoxSection.module.css

@@ -1,26 +0,0 @@
-.position__layout {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(20, 27, 92, 0.3);
-    width: 358px;
-    height: 349px;
-    border-radius: 8px;
-    text-align: center;
-    gap: 16px;
-    margin: 12px 0;
-}
-
-.position__layout h3 {
-    color: rgba(20, 27, 92, 1);
-    font-weight: 700;
-    font-size: 24px;
-}
-
-.position__layout h4 {
-    color: rgba(20, 27, 92, 1);
-    font-weight: 300;
-    font-size: 16px;
-    color: rgba(20, 27, 92, 1)
-}

package/dist/components/NSParentCard.module.css

@@ -1,35 +0,0 @@
-/* .section_card_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 48px 0;
-	gap: 48px;
-}
-
-.section_card_details>h2 {
-	color: inherit;
-	font-size: 32px;
-	font-weight: 700;
-	line-height: normal;
-	font-style: normal;
-	text-align: center;
-	margin-bottom: 16px;
-}
-
-.section_card_details>p {
-	color: inherit;
-	font-size: 16px;
-	font-weight: 400;
-	line-height: normal;
-	font-style: normal;
-	margin-bottom: 0;
-}
-
-.ns_card_container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	gap: 24px;
-} */

package/src/components/NSBoxPosition.module.css

@@ -1,81 +0,0 @@
-.position_box_contain {
-    width: 100%;
-    padding: 0 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.position_box_layout {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(20, 27, 92, 0.3);
-    width: 358px;
-    height: auto;
-    border-radius: 8px;
-    text-align: center;
-    gap: 16px;
-    margin: 12px 0;
-    padding: 16px 0;
-}
-
-.position_box_information {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
-    align-items: start;
-    text-align: left;
-    padding: 0 16px;
-    color: rgba(20, 27, 92, 1);
-}
-
-.position_box_information h3 {
-    font-size: 24px;
-    font-weight: 700;
-}
-
-.position_box_information h4 {
-    font-size: 16px;
-    font-weight: bold;
-    font-weight: 600;
-}
-
-.position_box_information ul {
-    width: 100%;
-}
-
-.position_box_information li {
-    text-decoration: underline;
-}
-
-.position_box_information span {
-    float: right;
-}
-
-@media only screen and (min-width:768px) {
-    .position_box_layout {
-        display: flex;
-        flex-direction: row;
-        justify-content: left;
-        width: 100%;
-        height: auto;
-    }
-
-    .position_box_contain {
-        padding: 0 48px;
-        display: flex;
-        justify-content: left;
-    }
-
-    .position_box_layout img {
-        width: 408px;
-        height: 276px;
-        padding: 0 16px;
-    }
-
-    .position_box_information {
-        line-height: 16px;
-    }
-}

package/src/components/NSBoxPosition.tsx

@@ -1,56 +0,0 @@
-"use client";
-import Style from "./NSBoxPosition.module.css";
-import React from "react";
-
-interface IProps
-{
-    image: string;
-    title: string;
-    list: string;
-    percent: string | number;
-    information: string | number;
-}
-
-interface IState
-{
-    image: string;
-    title: string;
-    list: string;
-    percent: string | number;
-    information: string | number;
-
-}
-
-export class NSBoxPosition extends React.Component<IProps, IState>
-{
-
-    constructor(props: IProps)
-    {
-        super(props);
-        this.state = { title: props.title, image: props.image, list: props.list, percent: props.percent, information: props.information };
-    }
-
-    override render()
-    {
-        return (
-            <div className={Style.position_box_contain}>
-                <div className={Style.position_box_layout}>
-                    <img className="rounded" src={this.state.image} alt="wordpress" width={326} height={220}></img>
-                    <div className={Style.position_box_information}>
-                        <h3>{this.state.title}</h3>
-                        <h4>Skills :</h4>
-                        <ul>
-                            <li>{this.state.list}<span>{this.props.percent}</span></li>
-                        </ul>
-                        <h4>Or</h4>
-                        <ul>
-                            <li>{this.state.list}<span>{this.props.percent}</span></li>
-                        </ul>
-                        <h3>Responsibility :</h3>
-                        <p>{this.state.information}</p>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}

package/src/components/NSBoxSection.module.css

@@ -1,26 +0,0 @@
-.position__layout {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(20, 27, 92, 0.3);
-    width: 358px;
-    height: 349px;
-    border-radius: 8px;
-    text-align: center;
-    gap: 16px;
-    margin: 12px 0;
-}
-
-.position__layout h3 {
-    color: rgba(20, 27, 92, 1);
-    font-weight: 700;
-    font-size: 24px;
-}
-
-.position__layout h4 {
-    color: rgba(20, 27, 92, 1);
-    font-weight: 300;
-    font-size: 16px;
-    color: rgba(20, 27, 92, 1)
-}

package/src/components/NSBoxSection.tsx

@@ -1,73 +0,0 @@
-"use client";
-// import { a href="" } from "react-router-dom";
-// import Style from "./NSBoxSection.module.css";
-import React from "react";
-
-interface IProps
-{
-    detail: string;
-    image: string;
-    description: string;
-}
-
-interface IState
-{
-    detail: string;
-    image: string;
-    description: string;
-    toggle: boolean;
-}
-
-export class NSBoxSection extends React.Component<IProps, IState>
-{
-
-    constructor(props: IProps)
-    {
-        super(props);
-        this.state = { detail: props.detail, image: props.image, description: props.description, toggle: true };
-    }
-    setTitle(description: string)
-    {
-        this.setState({ description });
-    }
-    setHRef(detail: string)
-    {
-        this.setState({ detail });
-    }
-    setToggle(toggle: boolean)
-    {
-        this.setState({ toggle });
-    }
-
-    override render()
-    {
-        return (
-            <div className='position-contain'>
-                <div className="position-layout">
-                    <img className="rounded" src={this.state.image} alt="wordpress" width={326} height={220}></img>
-                    <div className='position-information'>
-                        <h3 className='position-title' style={{ display: this.state.toggle ? 'block' : 'none' }}>WordPress</h3>
-                        <a href="" onClick={(e) =>
-                        {
-                            this.setState({ toggle: !this.state.toggle })
-                            e.preventDefault()
-                        }}>
-                            <h4 className='position-readmore' style={{ display: this.state.toggle ? 'block' : 'none' }} >Read More<img className="mx-2" src='/assets/images/position-down-vector.png' alt="show-more" width={16} height={16}></img></h4>
-                        </a>
-                        <ul className='position-list' style={{ display: this.state.toggle ? 'none' : 'block' }}>
-                            <li>Frontend Programming</li>
-                            <li>Backend Programming</li>
-                        </ul>
-                        <a href="" onClick={(e) =>
-                        {
-                            this.setState({ toggle: !this.state.toggle })
-                            e.preventDefault()
-                        }}>
-                            <h4 style={{ display: this.state.toggle ? 'none' : 'block' }} >Read Less<img className="mx-2" src='/assets/images/position-down-vector.png' alt="show-more" style={{ transform: "rotate(180deg" }} width={16} height={16}></img></h4>
-                        </a>
-                    </div>
-                </div >
-            </div>
-        )
-    }
-}