fix: missing checkbox

components/InputForm.tsx

@@ -33,6 +33,7 @@ export type MethodType =
   | "push";
 export interface ScopeInfo {
   method: MethodType;
+  label: string;
   scopes?: string[] | string[][];
   description: string;
 }
@@ -40,29 +41,35 @@ export interface ScopeInfo {
 const scopesInfo: ScopeInfo[] = [
   {
     method: "read",
+    label: 'Read',
     scopes: READ_SCOPES,
     description: "read account's data",
   },
   {
     method: "write",
+    label: 'Write',
     scopes: WRITE_SCOPES,
     description: "modify account's data",
   },
   {
     method: "follow",
+    label: 'Follow',
     description: "modify account relationships,deprecated in 3.5.0 and newer.",
   },
   {
     method: "push",
+    label: "Push",
     description: "receive push notifications",
   },
   {
     method: "admin",
+    label: 'Admin',
     scopes: [ADMIN_READ_SCOPES, ADMIN_WRITE_SCOPES],
     description: "read all data on the server",
   },
   {
     method: "crypto",
+    label: "Crypto",
     description: "use end-to-end encryption",
   },
 ];

components/ScopeItem.tsx

@@ -1,12 +1,14 @@
-import { Checkbox } from "@radix-ui/react-checkbox";
+'use client'
+
 import { MethodType } from "./InputForm";
+import { Checkbox } from "@/components/ui/checkbox";
 
 interface ScopeCheckboxProps {
   scope: string;
   method: MethodType;
 }
 
-const ScopeCheckbox: React.FC<ScopeCheckboxProps> = ({ scope, method }) => {
+const ScopeItem: React.FC<ScopeCheckboxProps> = ({ scope, method }) => {
   return (
     <div className={`items-top flex space-x-2 hover:cursor-pointer`}>
       <Checkbox id={`${scope}`} />
@@ -25,4 +27,4 @@ const ScopeCheckbox: React.FC<ScopeCheckboxProps> = ({ scope, method }) => {
   );
 };
 
-export default ScopeCheckbox;
+export default ScopeItem;

components/ScopeSection.tsx

@@ -10,14 +10,14 @@ import { Button } from "@/components/ui/button";
 import { ChevronsUpDown } from "lucide-react";
 
 import { ScopeInfo } from "./InputForm";
-import ScopeCheckbox from "./ScopeCheckbox";
+import ScopeItem from "./ScopeItem";
 interface ScopeSectionProps {
   info: ScopeInfo;
   field: any;
 }
 
 const ScopeSection: React.FC<ScopeSectionProps> = ({ info, field }) => {
-  const { method, description, scopes } = info;
+  const { method, description, scopes, label } = info;
 
   return (
     <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3">
@@ -29,7 +29,7 @@ const ScopeSection: React.FC<ScopeSectionProps> = ({ info, field }) => {
               htmlFor={method}
               className="text-sm font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
             >
-              {method}
+              {label}
             </label>
             <p className="text-xs text-muted-foreground">{description}</p>
           </div>
@@ -57,12 +57,12 @@ const ScopeSection: React.FC<ScopeSectionProps> = ({ info, field }) => {
                     className="flex flex-col gap-2"
                   >
                     {items.map((item) => (
-                      <ScopeCheckbox scope={item} key={item} method={method} />
+                      <ScopeItem scope={item} key={item} method={method} />
                     ))}
                   </div>
                 ))
               : (scopes as string[]).map((scope) => (
-                  <ScopeCheckbox scope={scope} key={scope} method={method} />
+                  <ScopeItem scope={scope} key={scope} method={method} />
                 ))}
           </div>
         </CollapsibleContent>