From f5fc5d3dce7fcbf07b7b1504be57b62e121e7996 Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Wed, 1 Jun 2022 00:58:07 +0800
Subject: [PATCH] =?UTF-8?q?fe-08=20=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/pages/Charts/ColorPicker.jsx | 31 ++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 lazy-timer-fe/src/pages/Charts/ColorPicker.jsx

diff --git a/lazy-timer-fe/src/pages/Charts/ColorPicker.jsx b/lazy-timer-fe/src/pages/Charts/ColorPicker.jsx
new file mode 100644
index 0000000..3c9c678
--- /dev/null
+++ b/lazy-timer-fe/src/pages/Charts/ColorPicker.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs'
+
+import { Header } from '../components'
+
+const change = args => {
+    document.getElementById('preview').style.backgroundColor = args.currentValue.hex
+}
+
+const CustomColorPicker = ({ id, mode }) => <ColorPickerComponent id={id} mode={mode} modeSwitcher={false} inline showButtons={false} change={change} />
+
+const ColorPicker = () => (
+    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
+        <Header category="App" title="Color Picker" />
+        <div className="text-center">
+            <div id="preview" />
+            <div className="flex justify-center items-center gap-20 flex-wrap">
+                <div>
+                    <p className="text-2xl font-semibold mt-2 mb-4">Inline Pallete</p>
+                    <CustomColorPicker id="inline-palette" mode="Palette" />
+                </div>
+                <div>
+                    <p className="text-2xl font-semibold mt-2 mb-4">Inline Picker</p>
+                    <CustomColorPicker id="inline-picker" mode="Picker" />
+                </div>
+            </div>
+        </div>
+    </div>
+)
+
+export default ColorPicker