From a538b1c5a8b3f3d2590421e5a6fe3faf6bdb045b Mon Sep 17 00:00:00 2001
From: oiov <oiov@duck.com>
Date: Tue, 6 May 2025 18:59:38 +0800
Subject: [PATCH] styled edit form

---
 app/(protected)/admin/users/user-list.tsx     |  31 ++-
 .../dashboard/records/record-list.tsx         |  28 +-
 app/(protected)/dashboard/urls/url-list.tsx   |  45 ++--
 components/dashboard/form-section-columns.tsx |  20 +-
 components/forms/record-form.tsx              |  78 +++---
 components/forms/url-form.tsx                 |  17 +-
 components/forms/user-form.tsx                | 252 +++++++++---------
 components/sections/hero-landing.tsx          |   4 +-
 public/sw.js.map                              |   2 +-
 9 files changed, 248 insertions(+), 229 deletions(-)

diff --git a/app/(protected)/admin/users/user-list.tsx b/app/(protected)/admin/users/user-list.tsx
index 835cc3d..a10a9ac 100644
--- a/app/(protected)/admin/users/user-list.tsx
+++ b/app/(protected)/admin/users/user-list.tsx
@@ -16,7 +16,9 @@ import {
   CardHeader,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Modal } from "@/components/ui/modal";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
 import {
   Table,
   TableBody,
@@ -82,7 +84,7 @@ export default function UsersList({ user }: UrlListProps) {
   });
 
   const { mutate } = useSWRConfig();
-  const { data, error, isLoading } = useSWR<{ total: number; list: User[] }>(
+  const { data, isLoading } = useSWR<{ total: number; list: User[] }>(
     `/api/user/admin?page=${currentPage}&size=${pageSize}&email=${searchParams.email}&userName=${searchParams.userName}`,
     fetcher,
     {
@@ -122,16 +124,6 @@ export default function UsersList({ user }: UrlListProps) {
           </div>
         </CardHeader>
         <CardContent>
-          {isShowForm && (
-            <UserForm
-              user={{ id: user.id, name: user.name || "" }}
-              isShowForm={isShowForm}
-              setShowForm={setShowForm}
-              type="edit"
-              initData={currentEditUser}
-              onRefresh={handleRefresh}
-            />
-          )}
           <div className="mb-2 flex-row items-center gap-2 space-y-2 sm:flex sm:space-y-0">
             <div className="relative w-full">
               <Input
@@ -257,7 +249,7 @@ export default function UsersList({ user }: UrlListProps) {
                       </Badge>
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
-                      <StatusDot status={user.active} />
+                      <Switch defaultChecked={user.active === 1} />
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
                       {timeAgo(user.createdAt || "")}
@@ -299,6 +291,21 @@ export default function UsersList({ user }: UrlListProps) {
           </Table>
         </CardContent>
       </Card>
+
+      <Modal
+        className="md:max-w-2xl"
+        showModal={isShowForm}
+        setShowModal={setShowForm}
+      >
+        <UserForm
+          user={{ id: user.id, name: user.name || "" }}
+          isShowForm={isShowForm}
+          setShowForm={setShowForm}
+          type="edit"
+          initData={currentEditUser}
+          onRefresh={handleRefresh}
+        />
+      </Modal>
     </>
   );
 }
diff --git a/app/(protected)/dashboard/records/record-list.tsx b/app/(protected)/dashboard/records/record-list.tsx
index 744a16f..2e3142a 100644
--- a/app/(protected)/dashboard/records/record-list.tsx
+++ b/app/(protected)/dashboard/records/record-list.tsx
@@ -19,6 +19,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Modal } from "@/components/ui/modal";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -190,17 +191,6 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
           </div>
         </CardHeader>
         <CardContent>
-          {isShowForm && (
-            <RecordForm
-              user={{ id: user.id, name: user.name || "" }}
-              isShowForm={isShowForm}
-              setShowForm={setShowForm}
-              type={formType}
-              initData={currentEditRecord}
-              action={action}
-              onRefresh={handleRefresh}
-            />
-          )}
           <Table>
             <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
               <TableRow className="grid grid-cols-3 items-center sm:grid-cols-8">
@@ -351,6 +341,22 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
           </Table>
         </CardContent>
       </Card>
+
+      <Modal
+        className="md:max-w-2xl"
+        showModal={isShowForm}
+        setShowModal={setShowForm}
+      >
+        <RecordForm
+          user={{ id: user.id, name: user.name || "" }}
+          isShowForm={isShowForm}
+          setShowForm={setShowForm}
+          type={formType}
+          initData={currentEditRecord}
+          action={action}
+          onRefresh={handleRefresh}
+        />
+      </Modal>
     </>
   );
 }
diff --git a/app/(protected)/dashboard/urls/url-list.tsx b/app/(protected)/dashboard/urls/url-list.tsx
index b843460..d5bc9cb 100644
--- a/app/(protected)/dashboard/urls/url-list.tsx
+++ b/app/(protected)/dashboard/urls/url-list.tsx
@@ -23,11 +23,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
 import { Input } from "@/components/ui/input";
 import { Modal } from "@/components/ui/modal";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -46,10 +41,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import StatusDot from "@/components/dashboard/status-dot";
 import { FormType } from "@/components/forms/record-form";
 import { UrlForm } from "@/components/forms/url-form";
-import { BlurImg } from "@/components/shared/blur-image";
 import { CopyButton } from "@/components/shared/copy-button";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import { Icons } from "@/components/shared/icons";
@@ -105,9 +98,6 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
   const [pageSize, setPageSize] = useState(10);
   const [isShowStats, setShowStats] = useState(false);
   const [isShowQrcode, setShowQrcode] = useState(false);
-  const [qrcodeInfo, setQrcodeInfo] = useState({
-    payload: "",
-  });
   const [selectedUrl, setSelectedUrl] = useState<ShortUrlFormData | null>(null);
   const [searchParams, setSearchParams] = useState({
     slug: "",
@@ -191,17 +181,6 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
           </div>
         </CardHeader>
         <CardContent>
-          {isShowForm && (
-            <UrlForm
-              user={{ id: user.id, name: user.name || "" }}
-              isShowForm={isShowForm}
-              setShowForm={setShowForm}
-              type={formType}
-              initData={currentEditUrl}
-              action={action}
-              onRefresh={handleRefresh}
-            />
-          )}
           <div className="mb-2 flex-row items-center gap-2 space-y-2 sm:flex sm:space-y-0">
             <div className="relative w-full">
               <Input
@@ -392,12 +371,6 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                             setShowForm(false);
                             setFormType("edit");
                             setShowForm(!isShowForm);
-                            if (!isShowForm) {
-                              window.scrollTo({
-                                top: 0,
-                                behavior: "smooth",
-                              });
-                            }
                           }}
                         >
                           <p className="hidden sm:block">Edit</p>
@@ -464,6 +437,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
         </CardContent>
       </Card>
 
+      {/* QR code editor */}
       <Modal
         className="md:max-w-lg"
         showModal={isShowQrcode}
@@ -476,6 +450,23 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
           />
         )}
       </Modal>
+
+      {/* Url form */}
+      <Modal
+        className="md:max-w-2xl"
+        showModal={isShowForm}
+        setShowModal={setShowForm}
+      >
+        <UrlForm
+          user={{ id: user.id, name: user.name || "" }}
+          isShowForm={isShowForm}
+          setShowForm={setShowForm}
+          type={formType}
+          initData={currentEditUrl}
+          action={action}
+          onRefresh={handleRefresh}
+        />
+      </Modal>
     </>
   );
 }
diff --git a/components/dashboard/form-section-columns.tsx b/components/dashboard/form-section-columns.tsx
index f50958f..e7d6cce 100644
--- a/components/dashboard/form-section-columns.tsx
+++ b/components/dashboard/form-section-columns.tsx
@@ -3,14 +3,24 @@ import React from "react";
 interface SectionColumnsType {
   title: string;
   children: React.ReactNode;
+  required?: boolean;
+  className?: string;
 }
 
-export function FormSectionColumns({ title, children }: SectionColumnsType) {
+export function FormSectionColumns({
+  title,
+  children,
+  required,
+  className,
+}: SectionColumnsType) {
   return (
-    <div className="grid grid-cols-1 items-center gap-x-12 gap-y-2 py-2">
-      <h2 className="col-span-4 text-base font-semibold leading-none">
-        {title}
-      </h2>
+    <div className="grid w-full grid-cols-1 items-center gap-x-12 gap-y-2 py-2">
+      <div className="col-span-4 flex items-start gap-0.5 text-sm leading-none">
+        <h2 className="font-semibold">{title}</h2>
+        {required && (
+          <span className="text-neutral-500 dark:text-neutral-300">*</span>
+        )}
+      </div>
       <div className="col-span-6">{children}</div>
     </div>
   );
diff --git a/components/forms/record-form.tsx b/components/forms/record-form.tsx
index e38b14b..bd28218 100644
--- a/components/forms/record-form.tsx
+++ b/components/forms/record-form.tsx
@@ -23,6 +23,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
+import { Switch } from "../ui/switch";
 
 export type FormData = CreateDNSRecord;
 
@@ -155,13 +156,13 @@ export function RecordForm({
   };
 
   return (
-    <div className="mb-4 rounded-lg border border-dashed shadow-sm animate-in fade-in-50">
+    <div>
       <div className="rounded-t-lg bg-muted px-4 py-2 text-lg font-semibold">
         {type === "add" ? "Create" : "Edit"} record
       </div>
       <form className="p-4" onSubmit={onSubmit}>
         <div className="items-center justify-start gap-4 md:flex">
-          <FormSectionColumns title="Type">
+          <FormSectionColumns title="Type" required>
             <Select
               onValueChange={(value: RecordType) => {
                 setValue("type", value);
@@ -183,12 +184,12 @@ export function RecordForm({
             </Select>
             <p className="p-1 text-[13px] text-muted-foreground">Required.</p>
           </FormSectionColumns>
-          <FormSectionColumns title="Name">
+          <FormSectionColumns title="Name" required>
             <div className="flex w-full items-center gap-2">
               <Label className="sr-only" htmlFor="name">
                 Name (required)
               </Label>
-              <div className="relative">
+              <div className="relative w-full">
                 <Input
                   id="name"
                   className="flex-1 shadow-inner"
@@ -215,6 +216,32 @@ export function RecordForm({
               )}
             </div>
           </FormSectionColumns>
+        </div>
+
+        <div className="items-center justify-start gap-4 md:flex">
+          <FormSectionColumns title="TTL" required>
+            <Select
+              onValueChange={(value: string) => {
+                setValue("ttl", Number(value));
+              }}
+              name="ttl"
+              defaultValue={String(initData?.ttl || 1)}
+            >
+              <SelectTrigger className="w-full shadow-inner">
+                <SelectValue placeholder="Select a time" />
+              </SelectTrigger>
+              <SelectContent>
+                {TTL_ENUMS.map((ttl) => (
+                  <SelectItem key={ttl.value} value={ttl.value}>
+                    {ttl.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="p-1 text-[13px] text-muted-foreground">
+              Optional. Time To Live.
+            </p>
+          </FormSectionColumns>
           <FormSectionColumns
             title={
               currentRecordType === "CNAME"
@@ -254,29 +281,6 @@ export function RecordForm({
         </div>
 
         <div className="items-center justify-start gap-4 md:flex">
-          <FormSectionColumns title="TTL">
-            <Select
-              onValueChange={(value: string) => {
-                setValue("ttl", Number(value));
-              }}
-              name="ttl"
-              defaultValue={String(initData?.ttl || 1)}
-            >
-              <SelectTrigger className="w-full shadow-inner">
-                <SelectValue placeholder="Select a time" />
-              </SelectTrigger>
-              <SelectContent>
-                {TTL_ENUMS.map((ttl) => (
-                  <SelectItem key={ttl.value} value={ttl.value}>
-                    {ttl.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <p className="p-1 text-[13px] text-muted-foreground">
-              Optional. Time To Live.
-            </p>
-          </FormSectionColumns>
           <FormSectionColumns title="Comment">
             <div className="flex items-center gap-2">
               <Label className="sr-only" htmlFor="comment">
@@ -293,15 +297,17 @@ export function RecordForm({
               Enter your comment here (up to 100 characters)
             </p>
           </FormSectionColumns>
-          {/* <FormSectionColumns title="Proxy">
-          <div className="flex w-full items-center gap-2">
-            <Label className="sr-only" htmlFor="proxy">
-              Proxy
-            </Label>
-            <Switch id="proxied" {...register("proxied")} />
-          </div>
-          <p className="p-1 text-[13px] text-muted-foreground">Proxy status</p>
-        </FormSectionColumns> */}
+          <FormSectionColumns title="Proxy">
+            <div className="flex w-full items-center gap-2">
+              <Label className="sr-only" htmlFor="proxy">
+                Proxy
+              </Label>
+              <Switch id="proxied" {...register("proxied")} />
+            </div>
+            <p className="p-1 text-[13px] text-muted-foreground">
+              Proxy status
+            </p>
+          </FormSectionColumns>
         </div>
 
         {/* Action buttons */}
diff --git a/components/forms/url-form.tsx b/components/forms/url-form.tsx
index 30a4a0d..fe937fc 100644
--- a/components/forms/url-form.tsx
+++ b/components/forms/url-form.tsx
@@ -154,13 +154,13 @@ export function UrlForm({
   };
 
   return (
-    <div className="mb-4 rounded-lg border border-dashed shadow-sm animate-in fade-in-50">
+    <div>
       <div className="rounded-t-lg bg-muted px-4 py-2 text-lg font-semibold">
         {type === "add" ? "Create" : "Edit"} short link
       </div>
       <form className="p-4" onSubmit={onSubmit}>
         <div className="items-center justify-start gap-4 md:flex">
-          <FormSectionColumns title="Target URL">
+          <FormSectionColumns title="Target URL" required>
             <div className="flex w-full items-center gap-2">
               <Label className="sr-only" htmlFor="target">
                 Target
@@ -184,13 +184,13 @@ export function UrlForm({
               )}
             </div>
           </FormSectionColumns>
-          <FormSectionColumns title="Short Link">
+          <FormSectionColumns title="Short Link" required>
             <div className="flex w-full items-center gap-2">
               <Label className="sr-only" htmlFor="url">
                 Url
               </Label>
 
-              <div className="relative flex items-center">
+              <div className="relative flex w-full items-center">
                 <Select
                   onValueChange={(value: string) => {
                     setValue("prefix", value);
@@ -210,12 +210,9 @@ export function UrlForm({
                     ))}
                   </SelectContent>
                 </Select>
-                {/* <span className="pointer-events-none absolute left-20 whitespace-nowrap text-sm text-gray-400">
-                /s/
-              </span> */}
                 <Input
                   id="url"
-                  className="w-3/5 flex-1 rounded-none pl-[8px] shadow-inner"
+                  className="w-full rounded-none pl-[8px] shadow-inner"
                   size={20}
                   {...register("url")}
                   disabled={type === "edit"}
@@ -276,7 +273,7 @@ export function UrlForm({
               )}
             </div>
           </FormSectionColumns>
-          <FormSectionColumns title="Expiration">
+          <FormSectionColumns title="Expiration" required>
             <Select
               onValueChange={(value: string) => {
                 setValue("expiration", value);
@@ -285,7 +282,7 @@ export function UrlForm({
               defaultValue={initData?.expiration || "-1"}
             >
               <SelectTrigger className="w-full shadow-inner">
-                <SelectValue placeholder="Select a time" />
+                <SelectValue placeholder="Select a time range" />
               </SelectTrigger>
               <SelectContent>
                 {EXPIRATION_ENUMS.map((e) => (
diff --git a/components/forms/user-form.tsx b/components/forms/user-form.tsx
index 12fd5ce..fa36068 100644
--- a/components/forms/user-form.tsx
+++ b/components/forms/user-form.tsx
@@ -111,142 +111,144 @@ export function UserForm({
   };
 
   return (
-    <form
-      className="mb-4 rounded-lg border border-dashed p-4 shadow-sm animate-in fade-in-50"
-      onSubmit={onSubmit}
-    >
-      <div className="items-center justify-start gap-4 md:flex">
-        <FormSectionColumns title="Email">
-          <div className="flex w-full items-center gap-2">
-            <Label className="sr-only" htmlFor="email">
-              Email
+    <div>
+      <div className="rounded-t-lg bg-muted px-4 py-2 text-lg font-semibold">
+        Edit User
+      </div>
+      <form className="max-w-2xl p-4" onSubmit={onSubmit}>
+        <div className="items-center justify-start gap-4 md:flex">
+          <FormSectionColumns title="Email" required>
+            <div className="flex w-full items-center gap-2">
+              <Label className="sr-only" htmlFor="email">
+                Email
+              </Label>
+              <Input
+                id="email"
+                className="flex-1 shadow-inner"
+                size={32}
+                disabled
+                {...register("email")}
+              />
+            </div>
+            {errors?.email && (
+              <p className="p-1 text-[13px] text-red-600">
+                {errors.email.message}
+              </p>
+            )}
+          </FormSectionColumns>
+          <FormSectionColumns title="Name">
+            <Label className="sr-only" htmlFor="name">
+              Name
             </Label>
             <Input
-              id="email"
+              id="name"
               className="flex-1 shadow-inner"
-              size={32}
-              disabled
-              {...register("email")}
+              size={20}
+              {...register("name")}
             />
-          </div>
-          {errors?.email && (
-            <p className="p-1 text-[13px] text-red-600">
-              {errors.email.message}
-            </p>
-          )}
-        </FormSectionColumns>
-        <FormSectionColumns title="Name">
-          <Label className="sr-only" htmlFor="name">
-            Name
-          </Label>
-          <Input
-            id="name"
-            className="flex-1 shadow-inner"
-            size={20}
-            {...register("name")}
-          />
-          {errors?.name && (
-            <p className="p-1 text-[13px] text-red-600">
-              {errors.name.message}
-            </p>
-          )}
-        </FormSectionColumns>
-        <FormSectionColumns title="Active">
-          <div className="flex w-full items-center gap-2">
-            <Label className="sr-only" htmlFor="active">
-              Active
-            </Label>
-            <Switch
-              id="active"
-              {...register("active")}
-              defaultChecked={initData?.active === 1}
-              onCheckedChange={(value) => setValue("active", value ? 1 : 0)}
-            />
-          </div>
-        </FormSectionColumns>
-      </div>
+            {errors?.name && (
+              <p className="p-1 text-[13px] text-red-600">
+                {errors.name.message}
+              </p>
+            )}
+          </FormSectionColumns>
+        </div>
 
-      <div className="items-center justify-start gap-4 md:flex">
-        <FormSectionColumns title="Role">
-          <Select
-            onValueChange={(value: string) => {
-              setValue("role", value as UserRole);
-            }}
-            name="role"
-            defaultValue={`${initData?.role}` || "USER"}
-          >
-            <SelectTrigger className="w-full shadow-inner">
-              <SelectValue placeholder="Select a role" />
-            </SelectTrigger>
-            <SelectContent>
-              {ROLE_ENUM.map((role) => (
-                <SelectItem key={role.value} value={role.value}>
-                  {role.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </FormSectionColumns>
-        <FormSectionColumns title="Plan">
-          <Select
-            onValueChange={(value: string) => {
-              setValue("team", value);
-            }}
-            name="team"
-            defaultValue={`${initData?.team}` || "free"}
-          >
-            <SelectTrigger className="w-full shadow-inner">
-              <SelectValue placeholder="Select a plan" />
-            </SelectTrigger>
-            <SelectContent>
-              {["free", "premium", "business"].map((role) => (
-                <SelectItem key={role} value={role}>
-                  {role}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </FormSectionColumns>
-      </div>
+        <div className="items-center justify-start gap-4 md:flex">
+          <FormSectionColumns title="Role">
+            <Select
+              onValueChange={(value: string) => {
+                setValue("role", value as UserRole);
+              }}
+              name="role"
+              defaultValue={`${initData?.role}` || "USER"}
+            >
+              <SelectTrigger className="w-full shadow-inner">
+                <SelectValue placeholder="Select a role" />
+              </SelectTrigger>
+              <SelectContent>
+                {ROLE_ENUM.map((role) => (
+                  <SelectItem key={role.value} value={role.value}>
+                    {role.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormSectionColumns>
+          <FormSectionColumns title="Plan">
+            <Select
+              onValueChange={(value: string) => {
+                setValue("team", value);
+              }}
+              name="team"
+              defaultValue={`${initData?.team}` || "free"}
+            >
+              <SelectTrigger className="w-full shadow-inner">
+                <SelectValue placeholder="Select a plan" />
+              </SelectTrigger>
+              <SelectContent>
+                {["free", "premium", "business"].map((role) => (
+                  <SelectItem key={role} value={role}>
+                    {role}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormSectionColumns>
+          <FormSectionColumns title="Active">
+            <div className="flex w-full items-center gap-2">
+              <Label className="sr-only" htmlFor="active">
+                Active
+              </Label>
+              <Switch
+                id="active"
+                {...register("active")}
+                defaultChecked={initData?.active === 1}
+                onCheckedChange={(value) => setValue("active", value ? 1 : 0)}
+              />
+            </div>
+          </FormSectionColumns>
+        </div>
 
-      {/* Action buttons */}
-      <div className="mt-3 flex justify-end gap-3">
-        {type === "edit" && (
+        {/* Action buttons */}
+        <div className="mt-3 flex justify-end gap-3">
+          {type === "edit" && (
+            <Button
+              type="button"
+              variant="destructive"
+              className="mr-auto w-[80px] px-0"
+              onClick={() => handleDelete()}
+              disabled={isDeleting}
+            >
+              {isDeleting ? (
+                <Icons.spinner className="size-4 animate-spin" />
+              ) : (
+                <p>Delete</p>
+              )}
+            </Button>
+          )}
           <Button
-            type="button"
-            variant="destructive"
-            className="mr-auto w-[80px] px-0"
-            onClick={() => handleDelete()}
-            disabled={isDeleting}
+            type="reset"
+            variant="outline"
+            className="w-[80px] px-0"
+            onClick={() => setShowForm(false)}
           >
-            {isDeleting ? (
+            Cancle
+          </Button>
+          <Button
+            type="submit"
+            variant="blue"
+            disabled={isPending}
+            className="w-[80px] shrink-0 px-0"
+          >
+            {isPending ? (
               <Icons.spinner className="size-4 animate-spin" />
             ) : (
-              <p>Delete</p>
+              <p>{type === "edit" ? "Update" : "Save"}</p>
             )}
           </Button>
-        )}
-        <Button
-          type="reset"
-          variant="outline"
-          className="w-[80px] px-0"
-          onClick={() => setShowForm(false)}
-        >
-          Cancle
-        </Button>
-        <Button
-          type="submit"
-          variant="blue"
-          disabled={isPending}
-          className="w-[80px] shrink-0 px-0"
-        >
-          {isPending ? (
-            <Icons.spinner className="size-4 animate-spin" />
-          ) : (
-            <p>{type === "edit" ? "Update" : "Save"}</p>
-          )}
-        </Button>
-      </div>
-    </form>
+        </div>
+      </form>
+    </div>
   );
 }
diff --git a/components/sections/hero-landing.tsx b/components/sections/hero-landing.tsx
index 08f4f33..7086a6d 100644
--- a/components/sections/hero-landing.tsx
+++ b/components/sections/hero-landing.tsx
@@ -38,8 +38,8 @@ export default async function HeroLanding() {
         </h1>
 
         <p className="max-w-2xl text-balance text-muted-foreground sm:text-lg">
-          Link shortening, domain hosting, email receivers or senders <br /> and
-          screenshot api, everything you need to build better.
+          Link shortening, domain hosting, email manager and <br />
+          open api, everything you need to build better.
         </p>
 
         <div className="flex items-center justify-center gap-4">
diff --git a/public/sw.js.map b/public/sw.js.map
index b287cea..86fadc4 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../../private/var/folders/9b/3qmyp8zd2xvdspdrp149fyg00000gn/T/7a8b5d7de1ca9ab438bf8344a0edcc83/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-routing@6.6.0/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-core@6.6.0/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAa,EAEZ,CAAA;EAQDC,CAAI,CAAA,CAAA,CAAA,CAACC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAE,CAAA;AAElBC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAyB,EAAE,CAAA;AAI3BC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAG,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIC,oBAA+B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAC,CAAA;GAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAe,EAAE,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAIF,QAAQ,CAAIA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACG,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,gBAAgB,CAAE,CAAA,CAAA;AAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAO,CAAIC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACJ,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACK,IAAI,CAAE,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAM,EAAE,CAAG,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAU,EAAE,CAAI,CAAA,CAAA,CAAA,CAAA;YAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAER,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACQ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAC,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOR,QAAQ,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA;KAAG,CAAA;AAAE,CAAA,CAAA,CAAC,CAAC,CAAA,CAAE,CAAK,CAAA,CAAA,CAAA,CAAA,CAAC,CAAA;AACxWL,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIc,mBAA8B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEZ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAA,CAAA;EAAG,CAAC,CAAC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA;;"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../../../private/var/folders/9b/3qmyp8zd2xvdspdrp149fyg00000gn/T/1ee7c5bbf85695258c6eaf0bfefa37ed/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-routing@6.6.0/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-core@6.6.0/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"}
\ No newline at end of file