implemented adding and editing of tasks

client/src/app/admin/(users)/AddUser.tsx

@@ -0,0 +1,79 @@
+import { AddLarge, Copy } from "@carbon/icons-react";
+import {
+	Button,
+	Checkbox,
+	Form,
+	Input,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from "@heroui/react";
+import { FormEvent, useState } from "react";
+
+export default function AddUser(props: {
+	isOpen: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+}) {
+	const [password, setPassword] = useState("");
+
+	return (
+		<Modal
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			shadow={"none" as "sm"}
+			backdrop="blur"
+		>
+			<ModalContent>
+				<ModalHeader>
+					<h1 className="text-2xl">Add User</h1>
+				</ModalHeader>
+
+				<Form
+					validationBehavior="native"
+					onSubmit={(e) => {
+						e.preventDefault();
+						props.onSubmit?.(e);
+					}}
+				>
+					<ModalBody className="w-full">
+						<Input
+							isRequired
+							type="user"
+							label="Name"
+							name="userName"
+							variant="bordered"
+						/>
+						<Input
+							isRequired
+							label="Password"
+							name="password"
+							variant="bordered"
+							endContent={
+								<Button
+									isIconOnly
+									variant="light"
+									onPress={() => navigator.clipboard.writeText(password)}
+								>
+									<Copy />
+								</Button>
+							}
+							value={password}
+							onValueChange={setPassword}
+						/>
+						<Checkbox value="admin" name="admin">
+							Admin
+						</Checkbox>
+					</ModalBody>
+					<ModalFooter>
+						<Button type="submit" color="primary" startContent={<AddLarge />}>
+							Add User
+						</Button>
+					</ModalFooter>
+				</Form>
+			</ModalContent>
+		</Modal>
+	);
+}