From 016237ff6b1a17a12abd74f6c4b5d8486ef37b56 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:20:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=9F=E6=9C=89=E8=BE=93=E5=85=A5=E9=80=89?=
 =?UTF-8?q?=E8=89=B2=E5=8A=9F=E8=83=BD=E7=BB=84=E4=BB=B6=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E6=9B=B4=E5=90=8D=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 2dda179..59a0c2e 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -1,5 +1,6 @@
 import { isEqual } from 'lodash-es';
 import { useState } from 'react';
+import { ColorComponentInput } from './ColorComponentInput';
 import styles from './ColorPicker.module.css';
 import { HSegmentedControl } from './HSegmentedControl';
 import { HslAssemble } from './HslAsssemble';
@@ -11,7 +12,7 @@ type ColorPickerProps = {
 };
 
 export function ColorPicker({ color, onSelect }: ColorPickerProps) {
-  const [pickMode, setMode] = useState<'rgb' | 'hsl'>('rgb');
+  const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'input'>('rgb');
   const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000');
   const handleColorSelect = (color: string) => {
     setSelectedColor(color);
@@ -26,9 +27,10 @@ export function ColorPicker({ color, onSelect }: ColorPickerProps) {
         options={[
           { label: 'RGB', value: 'rgb' },
           { label: 'HSL', value: 'hsl' },
+          { label: 'Input', value: 'input' },
         ]}
         value={pickMode}
-        onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'oklch')}
+        onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'input')}
       />
       {isEqual(pickMode, 'rgb') && (
         <RGBAssemble color={selectedColor} onChange={handleColorSelect} />
@@ -36,6 +38,9 @@ export function ColorPicker({ color, onSelect }: ColorPickerProps) {
       {isEqual(pickMode, 'hsl') && (
         <HslAssemble color={selectedColor} onChange={handleColorSelect} />
       )}
+      {isEqual(pickMode, 'input') && (
+        <ColorComponentInput color={selectedColor} onChange={handleColorSelect} />
+      )}
     </div>
   );
 }