namirasoft-site-react 1.4.135 → 1.4.136

package/src/components/NSTabPage.tsx

@@ -1,79 +1,79 @@
-"use client";
-import { Component } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSTabPage.module.css';
-
-export interface NSTabPageTab
-{
-	title: string;
-	getContent: () => React.ReactNode;
-}
-
-export interface NSTabPageProps extends IBaseComponentProps
-{
-	tabs: NSTabPageTab[]
-	grid?: boolean;
-}
-
-export interface NSTabPageState
-{
-	activeTabIndex: number;
-	isClicked: boolean[];
-}
-
-export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
-{
-	constructor(props: NSTabPageProps)
-	{
-		super(props);
-		this.state = {
-			activeTabIndex: 0,
-			isClicked: [true]
-		};
-	}
-	setClicked(indices: number[], callback: () => void)
-	{
-		let isClicked = this.state.isClicked;
-		for (let i = 0; i < indices.length; i++)
-			isClicked[indices[i]] = true;
-		this.setState({ isClicked }, callback);
-	}
-	override render()
-	{
-		return (
-			<div className={`${Styles.ns_tab_page_panel} ${this.props.classList}`} style={this.props.style ?? {}}>
-				<ul className={Styles.ns_tab_page_titles_container}>
-					{
-						this.props.tabs.map((tab, index) => (
-							<li
-								key={`NSTabPage_li_key_${index}`}
-								className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
-								onClick={() =>
-								{
-									let isClicked = this.state.isClicked;
-									isClicked[index] = true;
-									this.setState({ activeTabIndex: index, isClicked })
-								}}
-							>
-								{tab.title}
-							</li>
-						))
-					}
-				</ul>
-				{
-					this.props.tabs.map((tab, index) => (
-						<div
-							key={`NSTabPage_div_key_${index}`}
-							className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}
-							style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
-						>
-							{
-								this.state.isClicked[index] ? tab.getContent() : <></>
-							}
-						</div>
-					))
-				}
-			</div>
-		);
-	}
+"use client";
+import { Component } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSTabPage.module.css';
+
+export interface NSTabPageTab
+{
+	title: string;
+	getContent: () => React.ReactNode;
+}
+
+export interface NSTabPageProps extends IBaseComponentProps
+{
+	tabs: NSTabPageTab[]
+	grid?: boolean;
+}
+
+export interface NSTabPageState
+{
+	activeTabIndex: number;
+	isClicked: boolean[];
+}
+
+export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
+{
+	constructor(props: NSTabPageProps)
+	{
+		super(props);
+		this.state = {
+			activeTabIndex: 0,
+			isClicked: [true]
+		};
+	}
+	setClicked(indices: number[], callback: () => void)
+	{
+		let isClicked = this.state.isClicked;
+		for (let i = 0; i < indices.length; i++)
+			isClicked[indices[i]] = true;
+		this.setState({ isClicked }, callback);
+	}
+	override render()
+	{
+		return (
+			<div className={`${Styles.ns_tab_page_panel} ${this.props.classList}`} style={this.props.style ?? {}}>
+				<ul className={Styles.ns_tab_page_titles_container}>
+					{
+						this.props.tabs.map((tab, index) => (
+							<li
+								key={`NSTabPage_li_key_${index}`}
+								className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
+								onClick={() =>
+								{
+									let isClicked = this.state.isClicked;
+									isClicked[index] = true;
+									this.setState({ activeTabIndex: index, isClicked })
+								}}
+							>
+								{tab.title}
+							</li>
+						))
+					}
+				</ul>
+				{
+					this.props.tabs.map((tab, index) => (
+						<div
+							key={`NSTabPage_div_key_${index}`}
+							className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}
+							style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
+						>
+							{
+								this.state.isClicked[index] ? tab.getContent() : <></>
+							}
+						</div>
+					))
+				}
+			</div>
+		);
+	}
 }

package/src/components/NSTable.module.css

@@ -1,261 +1,262 @@
-.ns_table {
-	display: flex;
-	flex-direction: column;
-	color: rgba(20, 27, 92, 1);
-	overflow-x: auto;
-}
-
-.ns_search_input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	position: relative;
-	z-index: -1;
-}
-
-.ns_search_input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	position: relative;
-	z-index: -1;
-}
-
-
-.ns_table thead {
-	clip: rect(0 0 0 0);
-	position: fixed;
-}
-
-.ns_table tr {
-	border-radius: 8px;
-	padding: 16px 8px;
-	display: block;
-	background-color: rgba(255, 255, 255, 1);
-	margin: 24px 0;
-	transition: all 0.2s ease-in-out;
-}
-
-/* .ns_table th {
-	margin: 8px;
-} */
-
-.ns_table td {
-	display: flex;
-	flex-direction: row;
-	gap: 16px;
-	margin: 8px;
-	padding: 8px 0;
-	font-size: 16px;
-	justify-content: left;
-	align-items: center;
-	word-break: break-all;
-	color: #000;
-	height: max-content;
-	justify-content: left;
-	max-height: 50px;
-	display: -webkit-box;
-	line-clamp: 2;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-}
-
-.ns_table td::before {
-	content: attr(data-label);
-	font-weight: bold;
-	float: left;
-	min-width: 30%;
-}
-
-.ns_tbody tr:nth-child(odd):hover {
-	background-color: rgb(184 190 240 / 57%);
-}
-
-.ns_tbody tr:nth-child(even):hover {
-	background-color: rgb(184 190 240 / 57%);
-}
-
-.ns_tbody tr:nth-child(odd) {
-	background-color: #eaeaea;
-}
-
-.ns_tbody tr:nth-child(even) {
-	background-color: #ffffff;
-}
-
-.ns_table_footer {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-/* Check Box */
-.ns_check_box {
-	width: 100%;
-	text-align: center;
-}
-
-.ns_check_box {
-	height: 24px;
-	width: 24px !important;
-	cursor: pointer;
-}
-
-.ns_check_box:checked {
-	accent-color: #141B5C;
-}
-
-.ns_check_box_label {
-	display: block;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-	display: flex;
-	justify-content: left;
-	align-items: center;
-}
-
-.ns_indeterminate:indeterminate {
-	border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_indeterminate {
-	position: relative;
-}
-
-.ns_indeterminate::after {
-	content: "-";
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	border: 5px solid #fffbff;
-	color: #141b5c;
-	background: #141b5c;
-}
-
-/* Button Panel */
-.ns_button_panel {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	gap: 16px;
-}
-
-@media screen and (max-width: 992px) {
-	.ns_table td {
-		width: auto;
-	}
-}
-
-@media screen and (min-width: 992px) {
-	.ns_table {
-		color: #000000;
-		background-color: white;
-		display: flex;
-		justify-content: center;
-	}
-
-	.ns_table thead {
-		position: static;
-		background-color: rgba(20, 27, 92, 1);
-		border-top-left-radius: 8px;
-		border-top-right-radius: 8px;
-		min-width: max-content;
-	}
-
-	.ns_table tbody {
-		background-color: rgba(255, 255, 255, 1);
-		min-width: max-content;
-	}
-
-	.ns_table tr {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		padding: 16px 8px;
-		margin: 0;
-		border-radius: 0;
-		border-bottom: 1px solid rgba(20, 27, 92, 0.3);
-		background-color: transparent;
-		align-items: center;
-	}
-
-	.ns_table th {
-		font-size: 16px;
-		font-weight: 300;
-		color: #ffffff;
-		padding: 0;
-		margin: 8px;
-	}
-
-	.ns_table td {
-		text-align: left;
-		display: flex;
-		align-items: flex-start;
-	}
-
-	.ns_table td::before {
-		content: "";
-		float: left;
-		font-weight: bold;
-		min-width: unset;
-		display: none;
-	}
-
-	/* Footer */
-	.ns_table_footer {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	/* Check Box */
-	.ns_check_box {
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-	}
-
-	.ns_checkbox_label {
-		justify-content: center;
-	}
-}
-
-@media screen and (min-width: 1024px) {
-	.ns_table thead {
-		font-size: 24px;
-	}
-
-	.ns_table tr {
-		font-size: 24px;
-	}
-
-	.ns_table_footer {
-		display: flex;
-		flex-direction: row;
-		width: 100%;
-	}
-
-	/* Button Panel */
-	.ns_button_panel {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: flex-end;
-		align-items: center;
-		gap: 24px;
-		width: 100%;
-	}
+.ns_table {
+	display: flex;
+	flex-direction: column;
+	color: rgba(20, 27, 92, 1);
+	overflow-x: auto;
+}
+
+.ns_search_input {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	position: relative;
+	z-index: -1;
+}
+
+.ns_search_input {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	position: relative;
+	z-index: -1;
+}
+
+
+.ns_table thead {
+	clip: rect(0 0 0 0);
+	position: fixed;
+}
+
+.ns_table tr {
+	border-radius: 8px;
+	padding: 16px 8px;
+	display: block;
+	background-color: rgba(255, 255, 255, 1);
+	margin: 24px 0;
+	transition: all 0.2s ease-in-out;
+}
+
+/* .ns_table th {
+	margin: 8px;
+} */
+
+.ns_table td {
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	margin: 8px;
+	padding: 8px 0;
+	font-size: 16px;
+	justify-content: left;
+	align-items: center;
+	color: #000;
+	height: max-content;
+	justify-content: left;
+	max-height: 50px;
+	display: -webkit-box;
+	line-clamp: 2;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+	overflow-wrap: break-word;
+	word-break: break-word;
+}
+
+.ns_table td::before {
+	content: attr(data-label);
+	font-weight: bold;
+	float: left;
+	min-width: 30%;
+}
+
+.ns_tbody tr:nth-child(odd):hover {
+	background-color: rgb(184 190 240 / 57%);
+}
+
+.ns_tbody tr:nth-child(even):hover {
+	background-color: rgb(184 190 240 / 57%);
+}
+
+.ns_tbody tr:nth-child(odd) {
+	background-color: #eaeaea;
+}
+
+.ns_tbody tr:nth-child(even) {
+	background-color: #ffffff;
+}
+
+.ns_table_footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+/* Check Box */
+.ns_check_box {
+	width: 100%;
+	text-align: center;
+}
+
+.ns_check_box {
+	height: 24px;
+	width: 24px !important;
+	cursor: pointer;
+}
+
+.ns_check_box:checked {
+	accent-color: #141B5C;
+}
+
+.ns_check_box_label {
+	display: block;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	display: flex;
+	justify-content: left;
+	align-items: center;
+}
+
+.ns_indeterminate:indeterminate {
+	border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.ns_indeterminate {
+	position: relative;
+}
+
+.ns_indeterminate::after {
+	content: "-";
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	border: 5px solid #fffbff;
+	color: #141b5c;
+	background: #141b5c;
+}
+
+/* Button Panel */
+.ns_button_panel {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 16px;
+}
+
+@media screen and (max-width: 992px) {
+	.ns_table td {
+		width: auto;
+	}
+}
+
+@media screen and (min-width: 992px) {
+	.ns_table {
+		color: #000000;
+		background-color: white;
+		display: flex;
+		justify-content: center;
+	}
+
+	.ns_table thead {
+		position: static;
+		background-color: rgba(20, 27, 92, 1);
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
+		min-width: max-content;
+	}
+
+	.ns_table tbody {
+		background-color: rgba(255, 255, 255, 1);
+		min-width: max-content;
+	}
+
+	.ns_table tr {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		padding: 16px 8px;
+		margin: 0;
+		border-radius: 0;
+		border-bottom: 1px solid rgba(20, 27, 92, 0.3);
+		background-color: transparent;
+		align-items: center;
+	}
+
+	.ns_table th {
+		font-size: 16px;
+		font-weight: 300;
+		color: #ffffff;
+		padding: 0;
+		margin: 8px;
+	}
+
+	.ns_table td {
+		text-align: left;
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.ns_table td::before {
+		content: "";
+		float: left;
+		font-weight: bold;
+		min-width: unset;
+		display: none;
+	}
+
+	/* Footer */
+	.ns_table_footer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* Check Box */
+	.ns_check_box {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.ns_checkbox_label {
+		justify-content: center;
+	}
+}
+
+@media screen and (min-width: 1024px) {
+	.ns_table thead {
+		font-size: 24px;
+	}
+
+	.ns_table tr {
+		font-size: 24px;
+	}
+
+	.ns_table_footer {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+	}
+
+	/* Button Panel */
+	.ns_button_panel {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 24px;
+		width: 100%;
+	}
 }