improve: replace long line of words with clipboard button (#95)

* improve: replace long line of words with clipboard button

* change module path

src/components/copy-button.tsx

@@ -0,0 +1,45 @@
+import { ButtonProps } from "@/components/ui/button"
+import { copyToClipboard } from "@/lib/utils"
+import { forwardRef } from "react"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+
+import { IconButton } from "./xui/icon-button"
+
+interface CopyButtonProps extends ButtonProps {
+    text?: string
+}
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {
+    const { t } = useTranslation()
+    const [copy, setCopy] = useState(false)
+
+    const switchState = async (text?: string) => {
+        if (!text) {
+            toast("Warning", {
+                description: t("EmptyText"),
+            })
+            return
+        }
+
+        if (!copy) {
+            setCopy(true)
+            await copyToClipboard(text)
+            setTimeout(() => {
+                setCopy(false)
+            }, 2 * 1000)
+        }
+    }
+
+    return (
+        <IconButton
+            {...props}
+            ref={ref}
+            variant="outline"
+            size="icon"
+            icon={copy ? "check" : "clipboard"}
+            onClick={() => switchState(props.text)}
+        />
+    )
+})

src/components/note-menu.tsx

@@ -23,7 +23,7 @@ export const NoteMenu = forwardRef<HTMLButtonElement, NoteMenuProps>((props, ref
     const switchState = async (text?: string) => {
         if (!text) {
             toast("Warning", {
-                description: "You didn't have any note.",
+                description: t("EmptyNote"),
             })
             return
         }

src/locales/en/translation.json

@@ -176,5 +176,7 @@
     "OnlineUser": "Online User",
     "Total": "Total",
     "ConfirmBlock": "Confirm Block",
-    "RejectPassword": "Reject Password Login"
+    "RejectPassword": "Reject Password Login",
+    "EmptyText": "Text is empty",
+    "EmptyNote": "You didn't have any note."
 }

src/routes/alert-rule.tsx

@@ -2,6 +2,7 @@ import { deleteAlertRules } from "@/api/alert-rule"
 import { swrFetcher } from "@/api/api"
 import { ActionButtonGroup } from "@/components/action-button-group"
 import { AlertRuleCard } from "@/components/alert-rule"
+import { CopyButton } from "@/components/copy-button"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { NotificationTab } from "@/components/notification-tab"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -87,11 +88,7 @@ export default function AlertRulePage() {
             header: t("Rules"),
             cell: ({ row }) => {
                 const s = row.original
-                return (
-                    <div className="max-w-48 whitespace-normal break-words">
-                        {JSON.stringify(s.rules)}
-                    </div>
-                )
+                return <CopyButton text={JSON.stringify(s.rules)} />
             },
         },
         {

src/routes/cron.tsx

@@ -1,6 +1,7 @@
 import { swrFetcher } from "@/api/api"
 import { deleteCron, runCron } from "@/api/cron"
 import { ActionButtonGroup } from "@/components/action-button-group"
+import { CopyButton } from "@/components/copy-button"
 import { CronCard } from "@/components/cron"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -86,7 +87,7 @@ export default function CronPage() {
             accessorKey: "command",
             cell: ({ row }) => {
                 const s = row.original
-                return <div className="max-w-48 whitespace-normal break-words">{s.command}</div>
+                return <CopyButton text={s.command} />
             },
         },
         {

src/routes/notification.tsx

@@ -1,6 +1,7 @@
 import { swrFetcher } from "@/api/api"
 import { deleteNotification } from "@/api/notification"
 import { ActionButtonGroup } from "@/components/action-button-group"
+import { CopyButton } from "@/components/copy-button"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { NotificationTab } from "@/components/notification-tab"
 import { NotifierCard } from "@/components/notifier"
@@ -93,7 +94,7 @@ export default function NotificationPage() {
             accessorFn: (row) => row.url,
             cell: ({ row }) => {
                 const s = row.original
-                return <div className="max-w-64 whitespace-normal break-words">{s.url}</div>
+                return <CopyButton text={s.url} />
             },
         },
         {

src/routes/server.tsx

@@ -1,6 +1,7 @@
 import { swrFetcher } from "@/api/api"
 import { deleteServer, forceUpdateServer } from "@/api/server"
 import { ActionButtonGroup } from "@/components/action-button-group"
+import { CopyButton } from "@/components/copy-button"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { InstallCommandsMenu } from "@/components/install-commands"
 import { NoteMenu } from "@/components/note-menu"
@@ -121,6 +122,14 @@ export default function ServerPage() {
                 return <NoteMenu note={{ private: s.note, public: s.public_note }} />
             },
         },
+        {
+            id: "uuid",
+            header: "UUID",
+            cell: ({ row }) => {
+                const s = row.original
+                return <CopyButton text={s.uuid} />
+            },
+        },
         {
             id: "actions",
             header: t("Actions"),