提取用来录入自定义颜色的公共ColorEntry组件。

src/page-components/scheme/swatch-scheme/Builder.tsx

@@ -6,50 +6,15 @@ import {
   SwatchSchemeSetting,
 } from '../../../color_functions/color_module';
 import { useColorFunction } from '../../../ColorFunctionContext';
-import { ActionIcon } from '../../../components/ActionIcon';
-import { FloatColorPicker } from '../../../components/FloatColorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { Switch } from '../../../components/Switch';
 import { SchemeContent } from '../../../models';
 import { useUpdateScheme } from '../../../stores/schemes';
 import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
 import { mapToObject } from '../../../utls';
+import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
 
-type IdenticalColorEntry = {
-  id: string;
-  name: string;
-  color: string;
-};
-
-type ColorEntryProps = {
-  entry: IdenticalColorEntry;
-  onDelete?: (index: string) => void;
-};
-
-function ColorEntry({ entry, onDelete }: ColorEntryProps) {
-  return (
-    <>
-      <div className="input_wrapper">
-        <input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
-      </div>
-      <div>
-        <FloatColorPicker
-          name={`color_${entry.id}`}
-          color={isEmpty(entry.color) ? undefined : entry.color}
-        />
-      </div>
-      <div>
-        <ActionIcon
-          icon="tabler:trash"
-          extendClassName={styles.delete_btn}
-          onClick={() => onDelete?.(entry.id)}
-        />
-      </div>
-    </>
-  );
-}
-
 type SwatchSchemeBuilderProps = {
   scheme: SchemeContent<SwatchSchemeStorage>;
   onBuildCompleted?: () => void;