From f2ca97238ba6cd97dbe3faf6636a923afa4d5bbe Mon Sep 17 00:00:00 2001
From: SevicheCC <91365763+Sevichecc@users.noreply.github.com>
Date: Mon, 5 Jun 2023 17:22:15 +0800
Subject: [PATCH] fix: missing checkbox

---
 components/InputForm.tsx                        |  7 +++++++
 components/{ScopeCheckbox.tsx => ScopeItem.tsx} |  8 +++++---
 components/ScopeSection.tsx                     | 10 +++++-----
 3 files changed, 17 insertions(+), 8 deletions(-)
 rename components/{ScopeCheckbox.tsx => ScopeItem.tsx} (80%)

diff --git a/components/InputForm.tsx b/components/InputForm.tsx
index d11be49..aeac7a7 100644
--- a/components/InputForm.tsx
+++ b/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",
   },
 ];
diff --git a/components/ScopeCheckbox.tsx b/components/ScopeItem.tsx
similarity index 80%
rename from components/ScopeCheckbox.tsx
rename to components/ScopeItem.tsx
index a01ad2c..7d91d49 100644
--- a/components/ScopeCheckbox.tsx
+++ b/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;
\ No newline at end of file
+export default ScopeItem;
\ No newline at end of file
diff --git a/components/ScopeSection.tsx b/components/ScopeSection.tsx
index c0f4cd0..f2b049d 100644
--- a/components/ScopeSection.tsx
+++ b/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>