From 47cbb300190297fcbb95e2350d3ce9c523349337 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 14:00:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90ColorPicker?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=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 | 19 ++++++++++++++++
 src/components/ColorPicker.tsx        | 32 +++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/ColorPicker.module.css
 create mode 100644 src/components/ColorPicker.tsx

diff --git a/src/components/ColorPicker.module.css b/src/components/ColorPicker.module.css
new file mode 100644
index 0000000..8bfc002
--- /dev/null
+++ b/src/components/ColorPicker.module.css
@@ -0,0 +1,19 @@
+@layer components {
+  .color_picker {
+    max-width: calc(var(--spacing) * 125);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+    .color_preview {
+      aspect-ratio: 4 / 1;
+    }
+    .color_code {
+      padding: var(--spacing-s) var(--spacing-xs);
+      text-align: right;
+      font-size: var(--font-size-xs);
+      line-height: var(--font-size-xs);
+      text-transform: uppercase;
+    }
+  }
+}
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
new file mode 100644
index 0000000..a9852f9
--- /dev/null
+++ b/src/components/ColorPicker.tsx
@@ -0,0 +1,32 @@
+import { isEqual } from 'lodash-es';
+import { useState } from 'react';
+import styles from './ColorPicker.module.css';
+import { HSegmentedControl } from './HSegmentedControl';
+import { HslAssemble } from './HslAsssemble';
+import { RGBAssemble } from './RGBAssemble';
+
+export function ColorPicker() {
+  const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'oklch'>('rgb');
+  const [selectedColor, setSelectedColor] = useState<string>('000000');
+
+  return (
+    <div className={styles.color_picker}>
+      <div className={styles.color_preview} style={{ backgroundColor: `#${selectedColor}` }} />
+      <div className={styles.color_code}>#{selectedColor}</div>
+      <HSegmentedControl
+        options={[
+          { label: 'RGB', value: 'rgb' },
+          { label: 'HSL', value: 'hsl' },
+        ]}
+        value={pickMode}
+        onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'oklch')}
+      />
+      {isEqual(pickMode, 'rgb') && (
+        <RGBAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
+      )}
+      {isEqual(pickMode, 'hsl') && (
+        <HslAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
+      )}
+    </div>
+  );
+}