From 3882ae764f5b3ab96b09a10b2650015cb39ed03f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 24 Jan 2025 11:26:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0ActionIcon=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActionIcon.module.css | 10 ++++++++++
 src/components/ActionIcon.tsx        | 25 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/ActionIcon.module.css
 create mode 100644 src/components/ActionIcon.tsx

diff --git a/src/components/ActionIcon.module.css b/src/components/ActionIcon.module.css
new file mode 100644
index 0000000..8a89fbd
--- /dev/null
+++ b/src/components/ActionIcon.module.css
@@ -0,0 +1,10 @@
+@layer components {
+  .action_icon {
+    padding: var(--spacing-xs);
+    border: none;
+    border-radius: var(--border-radius-xxs);
+    line-height: 1em;
+    .icon {
+    }
+  }
+}
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
new file mode 100644
index 0000000..d79b5d9
--- /dev/null
+++ b/src/components/ActionIcon.tsx
@@ -0,0 +1,25 @@
+import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
+import cx from 'clsx';
+import { MouseEventHandler, useCallback } from 'react';
+import styles from './ActionIcon.module.css';
+
+type ActionIconProps = {
+  icon: IconProps['icon'];
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  extendClassName?: HTMLButtonElement['className'];
+};
+
+export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps) {
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+    },
+    [onClick],
+  );
+
+  return (
+    <button onClick={handleClick} className={cx(styles.action_icon, extendClassName)}>
+      <Icon icon={icon} className={styles.icon} />
+    </button>
+  );
+}