namirasoft-site-react 1.3.59 → 1.3.61

package/dist/pages/NSLoginPage.d.ts

@@ -1,12 +1,11 @@
 import { Component } from 'react';
-interface IProps {
+export interface NSLoginPageProps {
     title: string;
     logo: string;
     background: string;
     href?: string;
     onClick?: () => void;
 }
-export declare class NSLoginPage extends Component<IProps> {
+export declare class NSLoginPage extends Component<NSLoginPageProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export {};

package/dist/pages/NSLoginPage.js

@@ -1,8 +1,9 @@
-"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
-import { NSLinkBlue, NSButtonGreen, NSSpace, NSSpaceSizeType } from "../main";
 import Styles from './NSLoginPage.module.css';
+import { NSButtonGreen } from '../components/NSButtonGreen';
+import { NSLinkBlue } from '../components/NSLinkBlue';
+import { NSSpace, NSSpaceSizeType } from '../components/NSSpace';
 export class NSLoginPage extends Component {
     render() {
         var _a;
@@ -11,7 +12,7 @@ export class NSLoginPage extends Component {
             button = _jsx(NSLinkBlue, { title: "Login", href: (_a = this.props.href) !== null && _a !== void 0 ? _a : "" });
         else if (this.props.onClick)
             button = _jsx(NSButtonGreen, { title: "Login", onClick: this.props.onClick });
-        return (_jsx("div", { style: { backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }, children: _jsxs("div", { className: `${Styles.ns_login_container}`, style: { marginTop: "100px" }, children: [_jsx("div", { className: `${Styles.ns_logo}`, children: _jsx("img", { width: 256, height: 256, src: this.props.logo, alt: "logo" }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { children: _jsx("h1", { className: `${Styles.ns_title}`, children: this.props.title }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { className: `${Styles.ns_button}`, children: button })] }) }));
+        return (_jsx("div", { style: { backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }, children: _jsxs("div", { className: `${Styles.ns_login_container}`, style: { marginTop: "100px" }, children: [_jsx("div", { className: `${Styles.ns_logo}`, children: _jsx("img", { width: 256, height: 256, src: this.props.logo, alt: `${this.props.title} Logo` }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { children: _jsx("h1", { className: `${Styles.ns_title}`, children: this.props.title }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { className: `${Styles.ns_button}`, children: button })] }) }));
     }
 }
 //# sourceMappingURL=NSLoginPage.js.map

package/dist/pages/NSLoginPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAU7C,MAAM,OAAO,WAAY,SAAQ,SAAiB;IAErC,MAAM;;QAEX,IAAI,MAAM,GAAG,mBAAK,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,MAAM,GAAG,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;aAClE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;YACvB,MAAM,GAAG,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAC;QAC1E,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,YAC1F,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aACzE,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE,YAC/B,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAC,MAAM,GAAO,GACnE,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,wBAAK,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,GAAM,EACvE,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,YAChC,MAAM,GACL,IACJ,GACJ,CACT,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAWjE,MAAM,OAAO,WAAY,SAAQ,SAA2B;IAE/C,MAAM;;QAEX,IAAI,MAAM,GAAG,mBAAK,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,MAAM,GAAG,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;aAClE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;YACvB,MAAM,GAAG,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAC;QAC1E,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,YAC1F,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aACzE,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE,YAC/B,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,OAAO,GAAQ,GACzF,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,wBAAK,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,GAAM,EACvE,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,YAChC,MAAM,GACL,IACJ,GACH,CACV,CAAC;IACN,CAAC;CACJ"}

package/dist/props/BaseComponentProps.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 export interface BaseComponentProps {
+    id?: string;
     classList?: string[];
     style?: React.CSSProperties;
 }

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.59",
+    "version": "1.3.61",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -30,7 +30,6 @@
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.3.1",
         "namirasoft-core": "^1.3.18",
-        "namirasoft-site-react": "^1.3.58",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",
@@ -64,4 +63,4 @@
             "last 1 safari version"
         ]
     }
-}
+}

package/src/App.tsx

@@ -1,21 +1,6 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable, NSInputDate, NSError, NSCopyToClipboard } from './main';
-import { NSSelectBox } from 'namirasoft-site-react/dist/components/NSSelectBox';
-import { type SelectProps } from 'antd';
-
-const options: SelectProps['options'] = [
-    {
-        label: 'Test1',
-        value: 'test1',
-        desc: 'Test1',
-    },
-     {
-        label: 'Test2',
-        value: 'test2',
-        desc: 'Test2',
-    }
-];
+import { NSFooter, NSHeader, NSTable, NSInputDate, NSCopyToClipboard } from './main';
 
 export function App()
 {
@@ -60,17 +45,11 @@ export function App()
                 scope='Namira Software Corporation'
                 logo='https://static.namirasoft.com/logo/namirasoft/base.png'
                 account={false}
-                background={{ color: "transparent !important" }}
+                style={{ backgroundColor: "transparent !important" }}
             />
             <div className="container">
-                <NSInputDate title="rrt"/>
-                <NSSelectBox
-                    options={options}
-                    title="Save"
-
-                />
-                <NSCopyToClipboard title='rrt' value="rrr"/>
-                <NSError show={true} text={"dddd"}/>
+                <NSInputDate title="rrt" />
+                <NSCopyToClipboard title='rrt' value="rrr" />
                 <NSTable<Row> columns={columns} rows={rows} getRowKey={row => row.id.toString()} />
             </div>
             <NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/logo/namirasoft/base.png' />

package/src/components/NSButton.module.css

@@ -1,13 +1,14 @@
 .ns_button {
-    display: flex;
     align-items: center;
-    justify-content: center;
-    font-size: 16px;
+    background-color: transparent;
     border-radius: 8px;
-    gap: 10px;
-    text-decoration: none;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
     color: black;
-    background-color: transparent;
-    width: 128px;
+    font-size: 16px;
+    font-weight: 400;
     height: 48px;
+    justify-content: center;
+    text-decoration: none;
+    max-width: 100%;
+    width: 128px;
 }

package/src/components/NSButton.tsx

@@ -1,21 +1,10 @@
-"use client";
-
-import { BackgroundProps } from "../props/BackgroundProps";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 import { ImageProps } from "../props/ImageProps";
 import Styles from "./NSButton.module.css";
 
-export interface NSButtonState
-{
-    title: string;
-    border?: string;
-    background?: BackgroundProps;
-    icon?: ImageProps;
-}
-export interface NSButtonProps
+export interface NSButtonProps extends BaseComponentProps
 {
     title: string;
-    border?: string;
-    background?: BackgroundProps;
     icon?: ImageProps;
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
@@ -23,17 +12,12 @@ export interface NSButtonProps
 export default function NSButton(props: NSButtonProps)
 {
     return (
-        <button onClick={(e) => { props.onClick(e) }} className={Styles.ns_button}
-            style={{
-                border: props.border,
-                backgroundColor: props.background?.color,
-                backgroundImage: props.background?.image,
-                backdropFilter: props.background?.filter,
-                backgroundPosition: props.background?.position,
-            }}>
-            {
-                props.icon && <img src={props.icon.src} alt={props.icon.alt} />
-            }
+        <button id={props.id}
+            className={`${Styles.ns_button} ${props.classList?.join(" ")}`}
+            style={props.style}
+            onClick={(e) => { props.onClick(e) }}
+        >
+            {props.icon && <img {...props.icon} />}
             {props.title}
         </button >
     );

package/src/components/NSButtonBlue.module.css

@@ -1,12 +1,4 @@
 .ns_button_blue {
-    width: 358px;
-    max-width: 100%;
-    height: 48px;
-    border-radius: 8px;
     background-color: rgba(3, 119, 255, 1);
-    color: #fff;
-    border: 0;
     box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    font-weight: 400;
 }

package/src/components/NSButtonBlue.tsx

@@ -1,32 +1,11 @@
-"use client";
-
-import React from "react";
+import NSButton from "./NSButton";
 import Style from "./NSButtonBlue.module.css";
+import { NSButtonProps } from "./NSButton";
 
-export interface NSButtonBlueProps
-{
-    title: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export interface NSButtonBlueState
-{
-    title: string;
-}
-
-export class NSButtonBlue extends React.Component<NSButtonBlueProps, NSButtonBlueState>
+export function NSButtonBlue(props: NSButtonProps) 
 {
-    constructor(props: NSButtonBlueProps)
-    {
-        super(props);
-        this.state = { title: props.title };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    override render()
-    {
-        return <button onClick={e => this.props.onClick(e)} className={Style.ns_button_blue}>{this.state.title}</button>;
-    }
+    if (!props.classList)
+        props.classList = [];
+    props.classList.push(Style.ns_button_blue);
+    return <NSButton {...props} />;
 }

package/src/components/NSButtonGreen.module.css

@@ -1,12 +1,4 @@
 .ns_button_green {
-    width: 358px;
-    max-width: 100%;
-    height: 48px;
-    border-radius: 8px;
     background-color: #06D182;
-    color: #fff;
-    border: 0;
     box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    font-weight: 400;
 }

package/src/components/NSButtonGreen.tsx

@@ -1,32 +1,11 @@
-"use client";
-
-import React from "react";
+import NSButton from "./NSButton";
 import Style from "./NSButtonGreen.module.css";
+import { NSButtonProps } from "./NSButton";
 
-export interface NSButtonGreenProps
-{
-    title: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export interface NSButtonGreenState
-{
-    title: string;
-}
-
-export class NSButtonGreen extends React.Component<NSButtonGreenProps, NSButtonGreenState>
+export function NSButtonGreen(props: NSButtonProps) 
 {
-    constructor(props: NSButtonGreenProps)
-    {
-        super(props);
-        this.state = { title: props.title };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    override render()
-    {
-        return <button onClick={e => this.props.onClick(e)} className={Style.ns_button_green}>{this.state.title}</button>;
-    }
+    if (!props.classList)
+        props.classList = [];
+    props.classList.push(Style.ns_button_green);
+    return <NSButton {...props} />;
 }

package/src/components/NSButtonRed.module.css

@@ -1,12 +1,4 @@
 .ns_button_red {
-    width: 358px;
-    max-width: 100%;
-    height: 48px;
-    border-radius: 8px;
     background-color: #FF3F3F;
-    color: #fff;
-    border: 0;
     box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    font-weight: 400;
 }

package/src/components/NSButtonRed.tsx

@@ -1,32 +1,11 @@
-"use client";
+import NSButton from "./NSButton";
+import Style from "./NSButtonGreen.module.css";
+import { NSButtonProps } from "./NSButton";
 
-import React from "react";
-import Style from "./NSButtonRed.module.css";
-
-export interface NSButtonRedProps
-{
-    title: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export interface NSButtonRedState
-{
-    title: string;
-}
-
-export class NSButtonRed extends React.Component<NSButtonRedProps, NSButtonRedState>
+export function NSButtonRed(props: NSButtonProps) 
 {
-    constructor(props: NSButtonRedProps)
-    {
-        super(props);
-        this.state = { title: props.title };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    override render()
-    {
-        return <button onClick={e => this.props.onClick(e)} className={Style.ns_button_red}>{this.state.title}</button>;
-    }
+    if (!props.classList)
+        props.classList = [];
+    props.classList.push(Style.ns_button_red);
+    return <NSButton {...props} />;
 }

package/src/components/NSCard.tsx

@@ -1,74 +1,68 @@
-"use client";
-import { Component } from 'react';
 import Styles from './NSCard.module.css'
 import { NSLinkBlue } from './NSLinkBlue';
 import { LinkProps } from '../props/LinkProps';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ImageProps } from '../props/ImageProps';
 
-export interface NSCardProps
+export interface NSCardProps extends BaseComponentProps
 {
-	id?: string | number;
 	title?: string;
 	headline?: {
 		color?: string;
 		text: string;
 	}
 	description?: string;
-	image: {
-		src: string;
-		alt: string;
-	};
-	link?: LinkProps
+	image: ImageProps;
+	link?: LinkProps;
 }
 
-export class NSCard extends Component<NSCardProps>
+export function NSCard(props: NSCardProps)
 {
-	override render()
-	{
-		return (
-			<>
-				<article className={Styles.ns_card}>
-					<div className={Styles.ns_card_detail_container}>
-						<div className={Styles.ns_card_title_img}
-							style={{
-								alignItems: this.props.description ? "flex-start" : "center",
-							}}
-						>
-							<img className={Styles.ns_card_img} src={this.props.image.src} alt={this.props.image.alt} />
-							<span className={Styles.ns_card_headline} style={{ color: this.props.headline?.color }}> {this.props.headline?.text} </span>
-							<h3 className={Styles.ns_card_title}>
-								{this.props.title && this.props.title}
-							</h3>
+	return (
+		<article id={props.id}
+			className={`${Styles.ns_card} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<div className={Styles.ns_card_detail_container}>
+				<div className={Styles.ns_card_title_img}
+					style={{
+						alignItems: props.description ? "flex-start" : "center",
+					}}
+				>
+					<img className={Styles.ns_card_img} {...props.image} />
+					<span className={Styles.ns_card_headline} style={{ color: props.headline?.color }}> {props.headline?.text} </span>
+					<h3 className={Styles.ns_card_title}>
+						{props.title}
+					</h3>
+				</div>
+				{
+					props.description &&
+					<p className={Styles.ns_card_description}>
+						{props.description}
+					</p>
+				}
+			</div>
+			{
+				props.link ?
+					props.link.title ?
+						<div className={Styles.ns_card_link_container}>
+							<NSLinkBlue
+								title={props.link.title}
+								href={props.link.href}
+								target={props.link.target}
+								style={{ marginTop: "24px" }}
+							/>
 						</div>
-
-						{this.props.description &&
-							<p className={Styles.ns_card_description}>
-								{this.props.description}
-							</p>
-						}
-
-					</div>
-					{this.props.link ?
-						this.props.link.title ?
-							<div className={Styles.ns_card_link_container}>
-								<NSLinkBlue
-									title={this.props.link.title}
-									href={this.props.link.href}
-									target={this.props.link.target}
-									style={{ marginTop: "24px" }}
-								/>
-							</div>
-							:
-							<div className={Styles.ns_card_link_container}>
-								<NSLinkBlue
-									href={this.props.link.href}
-									target={this.props.link.target}
-								/>
-							</div>
 						:
-						<></>
-					}
-				</article >
-			</>
-		);
-	}
+						<div className={Styles.ns_card_link_container}>
+							<NSLinkBlue
+								href={props.link.href}
+								target={props.link.target}
+							/>
+						</div>
+					:
+					<></>
+			}
+		</article >
+	);
 }

package/src/components/NSCopyToClipboard.module.css

@@ -27,7 +27,7 @@
 .ns_copy_to_clipboard_title {
     font-size: 24px;
     font-weight: 700;
-    color:rgba(20, 27, 92, 1);
+    color: rgba(20, 27, 92, 1);
     text-align: center;
     margin-bottom: 16px;
 }

package/src/components/NSCopyToClipboard.tsx

@@ -1,51 +1,37 @@
-"use client";
-
-import React from "react";
 import Styles from "./NSCopyToClipboard.module.css";
 import IconInputString from '../assets/images/icon-input-copy.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-
-export interface NSCopyToClipboardProps
+export interface NSCopyToClipboardProps extends BaseComponentProps
 {
     title: string;
     value: string;
 }
 
-export interface NSCopyToClipboardState
-{}
-
-export class NSCopyToClipboard extends React.Component<NSCopyToClipboardProps, NSCopyToClipboardState>
+export function NSCopyToClipboard(props: NSCopyToClipboardProps)
 {
-    constructor(props: NSCopyToClipboardProps)
-    {
-        super(props);
-        this.copyToClipboard = this.copyToClipboard.bind(this);
-    }
-
-    copyToClipboard(): void
+    function copyToClipboard(): void
     {
         if (navigator.clipboard && navigator.clipboard.writeText)
-        {
-            navigator.clipboard.writeText(this.props.value);
-        }
+            navigator.clipboard.writeText(props.value);
     }
-    override render()
-    {
-        return (
-            <div className={`${Styles.ns_copy_to_clipboard} p-2`}>
-                <span className={Styles.ns_copy_to_clipboard_title}>{this.props.title}</span>
-                <div className={Styles.ns_copy_to_clipboard_value}>
-                    <img
-                        className={Styles.ns_copy_to_clipboard_icon}
-                        src={IconInputString}
-                        alt="icon"
-                        width={16}
-                        height={16}
-                        onClick={this.copyToClipboard}
-                    />
-                    <span>{this.props.value}</span>
-                </div>
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_copy_to_clipboard} p-2 ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            <span className={Styles.ns_copy_to_clipboard_title}>{props.title}</span>
+            <div className={Styles.ns_copy_to_clipboard_value}>
+                <img
+                    className={Styles.ns_copy_to_clipboard_icon}
+                    src={IconInputString}
+                    alt="icon"
+                    width={16}
+                    height={16}
+                    onClick={copyToClipboard}
+                />
+                <span>{props.value}</span>
             </div>
-        );
-    }
+        </div>
+    );
 }

package/src/components/NSEntityBar.module.css

@@ -65,7 +65,7 @@
 		width: 30%;
 		max-width: 310px;
 	}
-	
+
 	.ns_entity_bar_image_title {
 		font-size: 32px;
 		line-height: 32px;

package/src/components/NSEntityBar.tsx

@@ -1,32 +1,28 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSEntityBar.module.css'
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ImageProps } from '../props/ImageProps';
 
-export interface NSEntityBarProps
+export interface NSEntityBarProps extends BaseComponentProps
 {
-	id?: string | number;
 	title: string;
 	description: string;
-	image: {
-		src: string;
-		alt: string;
-	},
+	image: ImageProps;
 }
 
-export class NSEntityBar extends Component<NSEntityBarProps> {
-	override render()
-	{
-		return (
-			<article className={Styles.ns_entity_bar_item}>
-				<figure className={Styles.ns_entity_bar_image_container}>
-					<img className={Styles.ns_entity_bar_image} src={this.props.image.src} alt={this.props.image.alt} width={310} height={240} />
-				</figure>
-				<div className={Styles.ns_entity_bar_details_container}>
-					<h3 className={Styles.ns_entity_bar_image_title}> {this.props.title} </h3>
-					<p className={Styles.ns_entity_bar_image_description} > {this.props.description} </p>
-				</div>
-			</article>
-		);
-	}
+export function NSEntityBar(props: NSEntityBarProps)
+{
+	return (
+		<article id={props.id}
+			className={`${Styles.ns_entity_bar_item} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<figure className={Styles.ns_entity_bar_image_container}>
+				<img className={Styles.ns_entity_bar_image} {...props.image} width={256} height={256} />
+			</figure>
+			<div className={Styles.ns_entity_bar_details_container}>
+				<h3 className={Styles.ns_entity_bar_image_title}> {props.title} </h3>
+				<p className={Styles.ns_entity_bar_image_description} > {props.description} </p>
+			</div>
+		</article>
+	);
 }