From e1b366adb004678d8d08ff1b87ec07d8b55a8380 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 15:28:24 +0800
Subject: [PATCH] =?UTF-8?q?ColorPicker=E4=B8=AD=E5=A2=9E=E5=8A=A0=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E5=BD=93=E5=89=8D=E9=A2=9C=E8=89=B2HEX=E5=80=BC?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker.module.css |  1 +
 src/components/ColorPicker.tsx        | 28 ++++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/ColorPicker.module.css b/src/components/ColorPicker.module.css
index 8bfc002..61f0678 100644
--- a/src/components/ColorPicker.module.css
+++ b/src/components/ColorPicker.module.css
@@ -14,6 +14,7 @@
       font-size: var(--font-size-xs);
       line-height: var(--font-size-xs);
       text-transform: uppercase;
+      cursor: pointer;
     }
   }
 }
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 59a0c2e..e480ff9 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -1,9 +1,11 @@
-import { isEqual } from 'lodash-es';
-import { useState } from 'react';
+import { isEqual, isNil } from 'lodash-es';
+import { useCallback, useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
 import { ColorComponentInput } from './ColorComponentInput';
 import styles from './ColorPicker.module.css';
 import { HSegmentedControl } from './HSegmentedControl';
 import { HslAssemble } from './HslAsssemble';
+import { NotificationType, useNotification } from './Notifications';
 import { RGBAssemble } from './RGBAssemble';
 
 type ColorPickerProps = {
@@ -12,17 +14,37 @@ type ColorPickerProps = {
 };
 
 export function ColorPicker({ color, onSelect }: ColorPickerProps) {
+  const [cpState, copyToClipboard] = useCopyToClipboard();
+  const { showToast } = useNotification();
   const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'input'>('rgb');
   const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000');
   const handleColorSelect = (color: string) => {
     setSelectedColor(color);
     onSelect?.(color);
   };
+  const handleCopyAction = useCallback(() => {
+    copyToClipboard(`#${selectedColor}`);
+  }, [selectedColor]);
+
+  useEffect(() => {
+    if (!isNil(cpState.error)) {
+      showToast(NotificationType.ERROR, 'Failed to copy to clipboard', 'tabler:alert-circle', 3000);
+    } else if (!isNil(cpState.value)) {
+      showToast(
+        NotificationType.SUCCESS,
+        `${cpState.value} has been copied to clipboard.`,
+        'tabler:circle-check',
+        3000,
+      );
+    }
+  }, [cpState]);
 
   return (
     <div className={styles.color_picker}>
       <div className={styles.color_preview} style={{ backgroundColor: `#${selectedColor}` }} />
-      <div className={styles.color_code}>#{selectedColor}</div>
+      <div className={styles.color_code} onClick={handleCopyAction}>
+        #{selectedColor}
+      </div>
       <HSegmentedControl
         options={[
           { label: 'RGB', value: 'rgb' },