Add admin button

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "clsx": "^2.0.0",
     "next": "13.5.4",

src/app/globals.css

@@ -5,19 +5,20 @@
 :root {
   --foreground: #fafafa;
   --foreground-alt: #757575;
-  --background: #0D0D0D;
+  --background: #0d0d0d;
   --box-bg: #191919;
   --box-border: #474747;
   --box-w: 480px;
   --box-min-w: 360px;
-  --tab-selected: #302F2F;
+  --tab-selected: #302f2f;
   --tab-font-size: 13px;
   --tab-text-color: #757575;
   --tab-selected-text: #fafafa;
-  --row-hover: #1E1E1E;
+  --row-hover: #1e1e1e;
   --admin-label-bg: #382525;
-  --admin-label-text: #ED6D68;
+  --admin-label-text: #ed6d68;
   --admin-empty-box: #212020;
+  --admin-set-btn: #282828;
 
   background: var(--background);
 }
@@ -28,4 +29,4 @@ body {
 
 main {
   min-height: 100svh;
-}
+}

src/components/AdminButton.tsx

@@ -0,0 +1,36 @@
+import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
+
+export default function AdminButton({
+  handleCheckboxChange,
+  isAdmin,
+}: {
+  handleCheckboxChange: () => void;
+  isAdmin: boolean;
+}) {
+  return isAdmin ? (
+    <button
+      tabIndex={-1}
+      onClick={handleCheckboxChange}
+      className="ml-auto flex gap-1 items-center bg-[var(--admin-label-bg)] md:hover:opacity-80 text-[11px] text-[var(--admin-label-text)] px-2 py-1 rounded-[2px] animate-fade-in"
+    >
+      Admin <Cross2Icon height={13} width={13} />
+    </button>
+  ) : (
+    <>
+      <button
+        tabIndex={-1}
+        onClick={handleCheckboxChange}
+        className="hidden group-focus-visible:hidden md:group-hover:flex items-center md:group-hover:gap-1 ml-auto bg-[var(--admin-set-btn)] md:hover:opacity-80 text-[11px] px-2 py-1 rounded-[2px] animate-fade-in"
+      >
+        Set admin <PlusIcon height={13} width={13} />
+      </button>
+      <button
+        tabIndex={-1}
+        onClick={handleCheckboxChange}
+        className="hidden md:group-hover:hidden group-focus-visible:gap-1 group-focus-visible:flex items-center ml-auto bg-[var(--admin-set-btn)] text-[11px] md:hover:opacity-80 px-2 py-1 rounded-[2px] animate-fade-in"
+      >
+        Set admin <PlusIcon height={13} width={13} />
+      </button>
+    </>
+  );
+}

src/components/UserRow.tsx

@@ -7,12 +7,11 @@ import { useRef, useState } from "react";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import clsx from "clsx";
-
-// Components
-import AdminTag from "./AdminTag";
+import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
 
 // Components
 import { useAdminStore } from "@/adminStore";
+import AdminButton from "./AdminButton";
 
 export default function UserRow({ user }: { user: User }) {
   const rowRef = useRef<HTMLDivElement>(null);
@@ -43,7 +42,7 @@ export default function UserRow({ user }: { user: User }) {
   }
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-    if (event.key === "Enter") {
+    if (event.key === "Enter" || event.key === " ") {
       toggleAdmin();
     }
   }
@@ -69,9 +68,8 @@ export default function UserRow({ user }: { user: User }) {
   return (
     <div
       ref={rowRef}
-      className="w-full flex gap-3 items-center px-2 py-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--tab-selected)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--box-bg)] rounded-[4px] focus-visible:rounded-[2px] focus-visible:bg-[var(--row-hover)] hover:bg-[var(--row-hover)] cursor-pointer"
+      className="w-full flex gap-3 items-center px-2 py-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--tab-selected)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--box-bg)] rounded-[4px] focus-visible:rounded-[2px] focus-visible:bg-[var(--row-hover)] hover:bg-[var(--row-hover)] group"
       tabIndex={0}
-      onClick={handleCheckboxChange}
       onKeyDown={handleKeyDown}
       role="checkbox"
       aria-checked={values.adminIds.includes(user.id)}
@@ -106,7 +104,11 @@ export default function UserRow({ user }: { user: User }) {
           {user.role}
         </span>
       </div>
-      {values.adminIds.includes(user.id) ? <AdminTag /> : null}
+
+      <AdminButton
+        handleCheckboxChange={handleCheckboxChange}
+        isAdmin={values.adminIds.includes(user.id)}
+      />
     </div>
   );
 }

src/lib/getUsers.ts

@@ -7,7 +7,7 @@ export default async function getUsers() {
   }
 
   // Artificial delay of 2.5 seconds
-  await new Promise((resolve) => setTimeout(resolve, 2500));
+  // await new Promise((resolve) => setTimeout(resolve, 2500));
 
   const result = await res.json();
   const data = Object.keys(result.users).map((key) => ({

tailwind.config.ts

@@ -13,7 +13,7 @@ const config: Config = {
       },
       animation: {
         "slide-right": "slideRightAndBack 0.3s ease-in-out",
-        "fade-in": "fadeIn 0.3s ease-in-out",
+        "fade-in": "fadeIn 0.15s ease-in-out",
       },
       keyframes: {
         slideRightAndBack: {