Consistent UI

ui/src/components/General/Warning/Warning.module.scss

@@ -0,0 +1,6 @@
+.warning {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}

ui/src/components/General/Warning/index.tsx

@@ -0,0 +1,17 @@
+import { WarningProps } from "./utils/types";
+import Icon from "components/General/Icon";
+import style from "./Warning.module.scss";
+
+const Warning: React.FC<WarningProps> = ({ text }) => {
+	return (
+		<div className={style.warning}>
+			<span>
+				<Icon name="AlertTriangle" size={30} />
+			</span>
+
+			<p>{text}</p>
+		</div>
+	);
+};
+
+export default Warning;

ui/src/components/General/Warning/utils/types.ts

@@ -0,0 +1,5 @@
+interface WarningProps {
+	text?: string;
+}
+
+export type { WarningProps };

ui/src/pages/Data/QRcode/QRcode.module.scss

@@ -7,17 +7,11 @@
 
 	&__output {
 		height: 266px;
-		&__result,
-		&__notfound {
+		&__result {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
 		}
-
-		&__notfound {
-			height: 200px;
-			text-align: center;
-		}
 	}
 }

ui/src/pages/Data/QRcode/index.tsx

@@ -2,8 +2,8 @@ import { Button, Card, Form, QRCode, Input, Badge } from "antd";
 import PageGrid from "components/Layouts/PageGrid";
 import React, { useEffect, useState } from "react";
 import { detectQrData, downloadQRCode } from "./utils/helper";
-import Icon from "components/General/Icon";
 import style from "./QRcode.module.scss";
+import Warning from "components/General/Warning";
 
 const { TextArea } = Input;
 
@@ -55,16 +55,10 @@ const QRcode: React.FC = () => {
 						<Button onClick={downloadQRCode}>Download</Button>
 					</div>
 				) : (
-					<div className={style.qrcode__output__notfound}>
-						<span>
-							<Icon name="AlertTriangle" size={30} />
-						</span>
-
-						<p>
-							There is no data for generating QR code, please
-							provide data first.
-						</p>
-					</div>
+					<Warning
+						text="There is no data for generating QR code, please provide data
+					first."
+					/>
 				)}
 			</Card>
 		</PageGrid>

ui/src/pages/Data/Sorting/index.tsx

@@ -11,6 +11,7 @@ import {
 	ResponsiveSegementWithLabel,
 	ResponsiveSelectWithLabel,
 } from "components/General/FormComponents";
+import Warning from "components/General/Warning";
 
 const { TextArea } = Input;
 
@@ -60,44 +61,53 @@ const Sorting: React.FC = () => {
 				</Card>
 
 				<Card className={style.sort__ouput}>
-					<ResponsiveSegementWithLabel
-						label={"Order"}
-						value={order}
-						onChange={(value: string | number) =>
-							setOrder(value as string)
-						}
-						options={[
-							{ label: "Ascending", value: "Ascending" },
-							{ label: "Descending", value: "Descending" },
-						]}
-					/>
+					{output === "No data" ? (
+						<Warning text="There is no data for sorting, please provide data first." />
+					) : (
+						<>
+							<ResponsiveSegementWithLabel
+								label={"Order"}
+								value={order}
+								onChange={(value: string | number) =>
+									setOrder(value as string)
+								}
+								options={[
+									{ label: "Ascending", value: "Ascending" },
+									{
+										label: "Descending",
+										value: "Descending",
+									},
+								]}
+							/>
 
-					<Form.Item label="Sorted output">
-						<TextArea
-							placeholder="output"
-							value={output}
-							rows={10}
-							readOnly
-							data-gramm={false}
-						/>
-					</Form.Item>
+							<Form.Item label="Sorted output">
+								<TextArea
+									placeholder="output"
+									value={output}
+									rows={10}
+									readOnly
+									data-gramm={false}
+								/>
+							</Form.Item>
 
-					<CopyInput>
-						<ResponsiveSelectWithLabel
-							label="Output separator"
-							value={outputFormat.value}
-							onSelect={(_, option) => {
-								setOutputFormat(option);
-							}}
-							options={OUTPUT_FORMAT}
-							defaultActiveFirstOption
-						/>
+							<CopyInput>
+								<ResponsiveSelectWithLabel
+									label="Output separator"
+									value={outputFormat.value}
+									onSelect={(_, option) => {
+										setOutputFormat(option);
+									}}
+									options={OUTPUT_FORMAT}
+									defaultActiveFirstOption
+								/>
 
-						<Clipboard
-							text={output}
-							clipboardComponent={ClipboardButton}
-						/>
-					</CopyInput>
+								<Clipboard
+									text={output}
+									clipboardComponent={ClipboardButton}
+								/>
+							</CopyInput>
+						</>
+					)}
 				</Card>
 			</PageGrid>
 		</Form>

ui/src/pages/Data/Sorting/utils/helper.ts

@@ -50,7 +50,7 @@ const sortData = (data: string, order: string) => {
 			);
 		}
 		default: {
-			return ["There is no data for sorting, please provide data first."];
+			return ["No data"];
 		}
 	}
 };