update

lifeparticle · May 1, 2024 · 5ced5f9 · 5ced5f9
1 parent 0f71333
commit 5ced5f9
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 15 deletions.
diff --git a/ui/src/pages/Generator/Uuid/Uuid.module.scss b/ui/src/pages/Generator/Uuid/Uuid.module.scss
@@ -6,6 +6,11 @@
 	height: var(--bt-full-page-height);
 	gap: var(--bt-size-20);
 
+	&__extra {
+		display: flex;
+		gap: var(--bt-size-20);
+	}
+
 	&__output {
 		display: flex;
 		gap: var(--bt-size-10);

diff --git a/ui/src/pages/Generator/Uuid/Uuid.tsx b/ui/src/pages/Generator/Uuid/Uuid.tsx
@@ -1,28 +1,65 @@
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import style from "./Uuid.module.scss";
-import { Card, Typography } from "antd";
+import { Card, Typography, InputNumber, List } from "antd";
 import { Clipboard } from "components/ComponentInjector";
 import { ClipboardButton } from "components/InjectedComponent";
 import { Icon, ResponsiveButton } from "components/General";
 
 const { Title } = Typography;
 
 const Uuid: FC = () => {
-	const [uuid, setUuid] = useState(crypto.randomUUID());
+	const [uuids, setUuids] = useState([crypto.randomUUID()]);
+	const [numUuids, setNumUuids] = useState(1);
+
+	const generateUuids = (count: number) => {
+		const newUuids = Array.from({ length: count }, () =>
+			crypto.randomUUID()
+		);
+		setUuids(newUuids);
+	};
+
+	useEffect(() => {
+		generateUuids(numUuids);
+	}, [numUuids]);
+
 	return (
 		<div className={style.uuid}>
-			<Card bordered={false} title="UUID">
-				<div className={style.uuid__output}>
-					<Title>{uuid}</Title>
-					<Clipboard
-						text={uuid}
-						clipboardComponent={ClipboardButton}
-					/>
-					<ResponsiveButton
-						icon={<Icon name="RefreshCcw" />}
-						onClick={() => setUuid(crypto.randomUUID())}
-					/>
-				</div>
+			<Card
+				style={{ width: "100%" }}
+				bordered={false}
+				title="UUID Generator"
+				extra={
+					<div className={style.uuid__extra}>
+						<InputNumber
+							min={1}
+							max={100}
+							defaultValue={1}
+							onChange={(value) => value && setNumUuids(value)}
+						/>
+						<ResponsiveButton
+							icon={<Icon name="RefreshCcw" />}
+							onClick={() => generateUuids(numUuids)}
+						/>
+						<Clipboard
+							text={Object.values(uuids).join("\n")}
+							label="Copy All"
+							clipboardComponent={ClipboardButton}
+						/>
+					</div>
+				}
+			>
+				<List
+					dataSource={uuids}
+					renderItem={(uuid) => (
+						<List.Item>
+							<Title level={5}>{uuid}</Title>
+							<Clipboard
+								text={uuid}
+								clipboardComponent={ClipboardButton}
+							/>
+						</List.Item>
+					)}
+				/>
 			</Card>
 		</div>
 	);