From 465f0afd64581c676e9c457452166cd554fb4f59 Mon Sep 17 00:00:00 2001
From: meetqy <meetqy@qq.com>
Date: Tue, 24 Oct 2023 11:06:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20Row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/renderer/src/components/Row.tsx       |  35 +++++
 .../src/renderer/src/pages/basic/index.tsx    | 136 +++++++++---------
 .../src/renderer/src/pages/unsync/index.tsx   |  40 ++----
 3 files changed, 115 insertions(+), 96 deletions(-)
 create mode 100644 apps/electron/src/renderer/src/components/Row.tsx

diff --git a/apps/electron/src/renderer/src/components/Row.tsx b/apps/electron/src/renderer/src/components/Row.tsx
new file mode 100644
index 00000000..b1a44afc
--- /dev/null
+++ b/apps/electron/src/renderer/src/components/Row.tsx
@@ -0,0 +1,35 @@
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+
+interface Props {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  onLeftClick?: () => void;
+  onRightClick?: () => void;
+  compact?: boolean;
+}
+
+export const Row = (props: Props) => {
+  return (
+    <div className={`card-row ${props.compact ? "compact" : ""}`}>
+      <div className="w-1/4" aria-hidden="true" onClick={props.onLeftClick}>
+        {props.left}
+      </div>
+
+      <div
+        className={`flex w-3/4 justify-end font-mono transition-colors ${
+          props.onRightClick
+            ? "cursor-pointer text-base-content/60 hover:text-base-content"
+            : "text-base-content/60"
+        }`}
+        aria-hidden="true"
+        onClick={props.onRightClick}
+      >
+        <div className={`w-4/5 truncate text-right`}>{props.right}</div>
+
+        {props.onRightClick && <ChevronRightIcon className="ml-1 h-4 w-4" />}
+      </div>
+    </div>
+  );
+};
+
+export default Row;
diff --git a/apps/electron/src/renderer/src/pages/basic/index.tsx b/apps/electron/src/renderer/src/pages/basic/index.tsx
index 38b1520a..0441b0d0 100644
--- a/apps/electron/src/renderer/src/pages/basic/index.tsx
+++ b/apps/electron/src/renderer/src/pages/basic/index.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 import {
-  ChevronRightIcon,
   ClockIcon,
   EyeIcon,
   FolderIcon,
   PhotoIcon,
 } from "@heroicons/react/24/outline";
 import Content from "@renderer/components/Content";
+import Row from "@renderer/components/Row";
 import Title from "@renderer/components/Title";
 import { useLanguage } from "@renderer/hooks";
 import { trpc } from "@renderer/utils/trpc";
@@ -115,80 +115,74 @@ const BasicPage = () => {
     <Content title={<Title>{lang.title}</Title>}>
       <div className="px-4">
         <div className="card-wrapper">
-          <div className="card-row">
-            <span>
-              <FolderIcon className="h-5 w-5" />
-
-              <span className="ml-2">{lang.file_path}</span>
-            </span>
-
-            <span
-              className="cursor-pointer font-mono text-base-content/60 transition-colors hover:text-base-content"
-              aria-hidden="true"
-              onClick={() => {
-                if (library) {
-                  window.shell.showItemInFolder(library.path);
-                }
-              }}
-            >
-              <span>{library?.path}</span>
-              <ChevronRightIcon className="right-svg" />
-            </span>
-          </div>
-
-          <div className="card-row">
-            <span>
-              <ClockIcon className="h-5 w-5" />
-
-              <span className="ml-2 flex items-center">{lang.last_time}</span>
-            </span>
-
-            <span className="cursor-pointer font-mono text-base-content/60 transition-colors hover:text-base-content">
-              {library?.lastSyncTime?.toLocaleString("zh", { hour12: false }) ??
-                lang.un_sync}
-            </span>
-          </div>
-
-          <div className="card-row">
-            <span>
-              <PhotoIcon className="h-5 w-5" />
-
-              <span className="ml-2">{lang.sync_count}</span>
-            </span>
-
-            <span className="font-mono">
-              <span className="text-success">{library?.syncCount ?? 0}</span>
-              <span className="mx-1 text-base-content/60">｜</span>
-              <span className="text-warning">{library?.unSyncCount ?? 0}</span>
-            </span>
-          </div>
+          <Row
+            left={
+              <>
+                <FolderIcon className="h-5 w-5" />
+                <span className="ml-2">{lang.file_path}</span>
+              </>
+            }
+            right={library?.path + "/123123/123/123"}
+            onRightClick={() => {
+              if (library) {
+                window.shell.showItemInFolder(library.path);
+              }
+            }}
+          />
+
+          <Row
+            left={
+              <>
+                <ClockIcon className="h-5 w-5" />
+                <span className="ml-2 flex items-center">{lang.last_time}</span>
+              </>
+            }
+            right={
+              library?.lastSyncTime?.toLocaleString("zh", { hour12: false }) ??
+              lang.un_sync
+            }
+          />
+
+          <Row
+            left={
+              <>
+                <PhotoIcon className="h-5 w-5" />
+                <span className="ml-2">{lang.sync_count}</span>
+              </>
+            }
+            right={
+              <>
+                <span className="text-success">{library?.syncCount ?? 0}</span>
+                <span className="mx-1 text-base-content/60">｜</span>
+                <span className="text-warning">
+                  {library?.unSyncCount ?? 0}
+                </span>
+              </>
+            }
+          />
         </div>
 
         <div className="card-wrapper mt-4">
-          <div className="card-row">
-            <span>
-              <div className="rounded-md bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-1 text-white">
-                <EyeIcon className="h-4 w-4" />
-              </div>
-
-              <span className="ml-2 flex items-center">{lang.preview}</span>
-            </span>
-
-            <span
-              aria-hidden="true"
-              onClick={() => {
-                void window.shell.openExternal(
-                  `http://${config?.ip}:${config?.clientPort}`,
-                );
-              }}
-              className="cursor-pointer font-mono text-base-content/60 transition-colors hover:text-base-content"
-            >
-              {config && (
+          <Row
+            left={
+              <>
+                <div className="rounded-md bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-1 text-white">
+                  <EyeIcon className="h-4 w-4" />
+                </div>
+                <span className="ml-2 flex items-center">{lang.preview}</span>
+              </>
+            }
+            right={
+              config && (
                 <span>{`http://${config.ip}:${config.clientPort}`}</span>
-              )}
-              <ChevronRightIcon className="right-svg" />
-            </span>
-          </div>
+              )
+            }
+            onRightClick={() => {
+              void window.shell.openExternal(
+                `http://${config?.ip}:${config?.clientPort}`,
+              );
+            }}
+          />
         </div>
 
         <div className="mt-4 flex py-3">
diff --git a/apps/electron/src/renderer/src/pages/unsync/index.tsx b/apps/electron/src/renderer/src/pages/unsync/index.tsx
index e843d425..469bb673 100644
--- a/apps/electron/src/renderer/src/pages/unsync/index.tsx
+++ b/apps/electron/src/renderer/src/pages/unsync/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import Content from "@renderer/components/Content";
+import Row from "@renderer/components/Row";
 import Title from "@renderer/components/Title";
 import { useDebounce, useLanguage } from "@renderer/hooks";
 import { trpc } from "@renderer/utils/trpc";
@@ -61,31 +61,21 @@ const UnsyncPage = () => {
           {data.length > 0 ? (
             <div className="card-wrapper mt-4 w-full">
               {data?.map((item, index) => (
-                <div className="card-row compact" key={index}>
-                  <div className="w-1/4 capitalize">
-                    {item.type === "unknown" ? "unkonwn error" : item.type}
-                  </div>
-                  <div className="flex w-3/4 items-center justify-end">
-                    <span
-                      className="flex cursor-pointer items-center"
-                      title={item.path}
-                      onClick={() => {
-                        void window.dialog.showErrorBox(
-                          item.path,
-                          item.message,
-                        );
-                      }}
-                      aria-hidden="true"
-                    >
-                      <span className="text-base-content/50">
-                        {item.path
-                          .replace(libPath, "")
-                          .replace("/metadata.json", "")}
-                      </span>
-                      <ChevronRightIcon className="right-svg" />
+                <Row
+                  key={index}
+                  compact
+                  left={
+                    <span className="capitalize">
+                      {item.type === "unknown" ? "unkonwn error" : item.type}
                     </span>
-                  </div>
-                </div>
+                  }
+                  right={item.path
+                    .replace(libPath, "")
+                    .replace("/metadata.json", "")}
+                  onRightClick={() => {
+                    void window.dialog.showErrorBox(item.path, item.message);
+                  }}
+                />
               ))}
             </div>
           ) : (