Created an Admin panel for developers

src/components/Low/Button.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import {ReactNode} from "react";
+import {BsArrowRepeat} from "react-icons/bs";
 
 interface Props {
 	children: ReactNode;
@@ -7,11 +8,21 @@ interface Props {
 	variant?: "outline" | "solid";
 	className?: string;
 	disabled?: boolean;
+	isLoading?: boolean;
 	onClick?: () => void;
 	type?: "button" | "reset" | "submit";
 }
 
-export default function Button({color = "purple", variant = "solid", disabled = false, className, children, type, onClick}: Props) {
+export default function Button({
+	color = "purple",
+	variant = "solid",
+	disabled = false,
+	isLoading = false,
+	className,
+	children,
+	type,
+	onClick,
+}: Props) {
 	const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
 		purple: {
 			solid: "bg-mti-purple-light text-white border border-mti-purple-light hover:bg-mti-purple disabled:text-mti-purple disabled:bg-mti-purple-ultralight selection:bg-mti-purple-dark",
@@ -39,8 +50,13 @@ export default function Button({color = "purple", variant = "solid", disabled =
 				className,
 				colorClassNames[color][variant],
 			)}
-			disabled={disabled}>
-			{children}
+			disabled={disabled || isLoading}>
+			{!isLoading && children}
+			{isLoading && (
+				<div className="flex items-center justify-center">
+					<BsArrowRepeat className="text-white animate-spin" size={25} />
+				</div>
+			)}
 		</button>
 	);
 }