From 2f0ebaefa0b67588389def511804c0580e3d2281 Mon Sep 17 00:00:00 2001
From: Mminamiyama <minamiyama@qq.com>
Date: Sun, 29 Jun 2025 03:16:39 +0800
Subject: [PATCH] feat(button): add sync button component with tooltip support

Implement a reusable sync button component with hover effects and optional tooltip functionality. The button uses React.memo for performance optimization.
---
 .../components/base/button/sync-button.tsx    | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 web/app/components/base/button/sync-button.tsx

diff --git a/web/app/components/base/button/sync-button.tsx b/web/app/components/base/button/sync-button.tsx
new file mode 100644
index 0000000000..013c86889a
--- /dev/null
+++ b/web/app/components/base/button/sync-button.tsx
@@ -0,0 +1,27 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { RiRefreshLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import TooltipPlus from '@/app/components/base/tooltip'
+
+type Props = {
+  className?: string,
+  popupContent?: string,
+  onClick: () => void
+}
+
+const SyncButton: FC<Props> = ({
+  className,
+  popupContent = '',
+  onClick,
+}) => {
+  return (
+    <TooltipPlus popupContent={popupContent}>
+      <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
+        <RiRefreshLine className='h-4 w-4 text-text-tertiary' />
+      </div>
+    </TooltipPlus>
+  )
+}
+export default React.memo(SyncButton)