feat: updated api settings page

apps/dashboard/app/(app)/apis/[apiId]/settings/components/copy-api-id.tsx

@@ -0,0 +1,44 @@
+import { SettingCard } from "@/components/settings-card";
+import { toast } from "@/components/ui/toaster";
+import { Clone } from "@unkey/icons";
+import { Input } from "@unkey/ui";
+
+export const CopyApiId = ({ apiId }: { apiId: string }) => {
+  return (
+    <SettingCard
+      className="pt-8 pb-8 mx-0"
+      title={
+        <div className="flex items-center justify-start gap-2.5">
+          <span className="text-sm font-medium text-accent-12">API ID</span>
+        </div>
+      }
+      description={
+        <div className="font-normal text-[13px] max-w-[380px]">
+          An identifier for the API, used in some API calls.
+        </div>
+      }
+      border="bottom"
+      contentWidth="w-full lg:w-[320px]"
+    >
+      <Input
+        className="w-full lg:w-[320px] focus:ring-0 focus:ring-offset-0"
+        readOnly
+        defaultValue={apiId}
+        placeholder="API ID"
+        rightIcon={
+          <button
+            type="button"
+            onClick={() => {
+              navigator.clipboard.writeText(apiId);
+              toast.success("Copied to clipboard", {
+                description: apiId,
+              });
+            }}
+          >
+            <Clone size="md-regular" className="text-accent-8" />
+          </button>
+        }
+      />
+    </SettingCard>
+  );
+};

apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx → apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx

@@ -1,13 +1,5 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { SettingCard } from "@/components/settings-card";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
@@ -71,50 +63,59 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Card>
-          <CardHeader>
-            <CardTitle>Default Bytes</CardTitle>
-            <CardDescription>
-              Set default Bytes for the keys under this API. Default byte size must be between{" "}
-              <span className="font-bold">8 to 255</span>
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col space-y-2">
-              <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-              <label htmlFor="defaultBytes" className="hidden sr-only">
-                Default Bytes
-              </label>
-              <FormField
-                control={form.control}
-                name="defaultBytes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="defaultBytes"
-                        className="max-w-sm"
-                        {...field}
-                        autoComplete="off"
-                        onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+        <SettingCard
+          className="mt-5 pt-[19px] pb-[20px]"
+          title={
+            <div className="flex items-center justify-start gap-2.5">
+              <span className="text-sm font-medium text-accent-12">Default Bytes</span>
             </div>
-          </CardContent>
-          <CardFooter className="justify-end">
+          }
+          description={
+            <div className="font-normal text-[13px] max-w-[380px]">
+              Sets the default byte size for keys under this API. Must be between 8 and 255.
+            </div>
+          }
+          border="top"
+          contentWidth="w-full lg:w-[320px]"
+        >
+          <div className="flex flex-row justify-items-stretch items-center w-full gap-x-2">
+            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+            <label htmlFor="defaultBytes" className="hidden sr-only">
+              Default Bytes
+            </label>
+            <FormField
+              control={form.control}
+              name="defaultBytes"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="defaultBytes"
+                      className="w-[20rem] lg:w-[16rem] h-9"
+                      {...field}
+                      autoComplete="off"
+                      onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <Button
-              variant="primary"
-              disabled={!form.formState.isValid || form.formState.isSubmitting}
+              size="lg"
+              className="rounded-lg px-2.5 items-end"
+              disabled={
+                !form.formState.isValid ||
+                form.formState.isSubmitting ||
+                keyAuth.defaultBytes === form.watch("defaultBytes")
+              }
               type="submit"
             >
-              {form.formState.isSubmitting ? <Loading /> : "Save"}
+              Save
             </Button>
-          </CardFooter>
-        </Card>
+          </div>
+        </SettingCard>
       </form>
     </Form>
   );

apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx → apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx

@@ -1,13 +1,6 @@
 "use client";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { SettingCard } from "@/components/settings-card";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
@@ -69,54 +62,63 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Card>
-          <CardHeader>
-            <CardTitle>Default Prefix</CardTitle>
-            <CardDescription>
-              Set default prefix for the keys under this API. Don't add a trailing underscore, we'll
-              do that automatically
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col space-y-2">
-              <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-              <label htmlFor="defaultPrefix" className="hidden sr-only">
-                Default Prefix
-              </label>
-              <FormField
-                control={form.control}
-                name="defaultPrefix"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="defaultPrefix"
-                        className="max-w-sm"
-                        {...field}
-                        onBlur={(e) => {
-                          if (e.target.value === "") {
-                            return;
-                          }
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+        <SettingCard
+          className="py-5"
+          title={
+            <div className=" flex items-center justify-start gap-2.5">
+              <span className="text-sm font-medium text-accent-12">Default Prefix</span>
             </div>
-          </CardContent>
-          <CardFooter className="justify-end">
+          }
+          description={
+            <div className="font-normal text-[13px] max-w-[380px]">
+              Sets the default prefix for keys under this API. A trailing underscore is added
+              automatically.
+            </div>
+          }
+          border="bottom"
+        >
+          <div className="flex flex-row justify-items-stretch items-center w-full gap-x-2">
+            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+            <label htmlFor="defaultPrefix" className="hidden sr-only">
+              Default Prefix
+            </label>
+            <FormField
+              control={form.control}
+              name="defaultPrefix"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="defaultPrefix"
+                      className="w-[20rem] lg:w-[16rem] h-9"
+                      {...field}
+                      autoComplete="off"
+                      onBlur={(e) => {
+                        if (e.target.value === "") {
+                          return;
+                        }
+                      }}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
             <Button
-              variant="primary"
-              disabled={!form.formState.isValid || form.formState.isSubmitting}
+              className="rounded-lg px-2.5 items-end"
+              size="lg"
+              disabled={
+                !form.formState.isValid ||
+                form.formState.isSubmitting ||
+                keyAuth.defaultPrefix === form.getValues("defaultPrefix")
+              }
               type="submit"
               loading={form.formState.isSubmitting}
             >
               Save
             </Button>
-          </CardFooter>
-        </Card>
+          </div>
+        </SettingCard>
       </form>
     </Form>
   );