Created an Admin panel for developers

src/components/High/Layout.tsx

@@ -34,6 +34,7 @@ export default function Layout({user, children, className, navDisabled = false,
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
 					className="-lg:hidden"
+					showAdmin={user.type === "developer"}
 				/>
 				<div
 					className={clsx(

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>
 	);
 }

src/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import {IconType} from "react-icons";
 import {MdSpaceDashboard} from "react-icons/md";
-import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp, BsChevronBarRight, BsChevronBarLeft} from "react-icons/bs";
+import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp, BsChevronBarRight, BsChevronBarLeft, BsShieldFill} from "react-icons/bs";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -18,6 +18,7 @@ interface Props {
 	focusMode?: boolean;
 	onFocusLayerMouseEnter?: () => void;
 	className?: string;
+	showAdmin?: boolean;
 }
 
 interface NavProps {
@@ -43,7 +44,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false}
 	</Link>
 );
 
-export default function Sidebar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter, className}: Props) {
+export default function Sidebar({path, navDisabled = false, focusMode = false, showAdmin = false, onFocusLayerMouseEnter, className}: Props) {
 	const router = useRouter();
 
 	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
@@ -69,6 +70,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, o
 				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
 				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+				{showAdmin && (
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Admin" path={path} keyPath="/admin" isMinimized={isMinimized} />
+				)}
 			</div>
 
 			<div className="flex flex-col gap-0 absolute bottom-12">