From cff2ad04390437987603b6dce83be8287ec9e9c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 24 Jan 2025 09:11:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=88=9B=E5=BB=BAScheme?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=94=AF=E6=8C=81=E5=A4=9A=E7=A7=8DScheme?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E9=80=89=E6=8B=A9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/models.ts                  | 10 ++++++++++
 src/pages/NewScheme.module.css |  3 +++
 src/pages/NewScheme.tsx        | 20 ++++++++++++++++++--
 src/stores/schemes.ts          |  4 ++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/models.ts b/src/models.ts
index f8e8346..658773d 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -27,6 +27,16 @@ export type ColorDescription = {
 };
 
 export type SchemeType = 'q_scheme' | 'swatch_scheme' | 'material_2' | 'material_3';
+export type SchemeTypeOption = {
+  label: string;
+  value: SchemeType;
+};
+export const SchemeTypeOptions: SchemeTypeOption[] = [
+  { label: 'Q Scheme', value: 'q_scheme' },
+  { label: 'Swatch Scheme', value: 'swatch_scheme' },
+  { label: 'Material Design 2 Scheme', value: 'material_2' },
+  { label: 'Material Design 3 Scheme', value: 'material_3' },
+];
 export type SchemeContent<SchemeStorage> = {
   id: string;
   name: string;
diff --git a/src/pages/NewScheme.module.css b/src/pages/NewScheme.module.css
index c9aecb6..b19bb41 100644
--- a/src/pages/NewScheme.module.css
+++ b/src/pages/NewScheme.module.css
@@ -25,4 +25,7 @@
       }
     }
   }
+  .custom_segment {
+    font-size: var(--font-size-s);
+  }
 }
diff --git a/src/pages/NewScheme.tsx b/src/pages/NewScheme.tsx
index 5ccfd97..913af8e 100644
--- a/src/pages/NewScheme.tsx
+++ b/src/pages/NewScheme.tsx
@@ -1,13 +1,16 @@
 import cx from 'clsx';
 import { isEmpty, isNil } from 'lodash-es';
-import { useActionState } from 'react';
+import { useActionState, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { VSegmentedControl } from '../components/VSegmentedControl';
+import { SchemeTypeOption, SchemeTypeOptions } from '../models';
 import { useCreateScheme } from '../stores/schemes';
 import styles from './NewScheme.module.css';
 
 export function NewScheme() {
   const createScheme = useCreateScheme();
   const navigate = useNavigate();
+  const [schemeType, setSchemeType] = useState<SchemeTypeOption['value']>('q_scheme');
   const [errors, formAction] = useActionState((prevState, formData) => {
     try {
       const name = formData.get('name') as string;
@@ -15,7 +18,8 @@ export function NewScheme() {
         throw { name: 'Name is required' };
       }
       const description = (formData.get('description') ?? null) as string | null;
-      const newId = createScheme(name, description);
+      const schemeType = (formData.get('type') ?? 'q_scheme') as SchemeTypeOption['value'];
+      const newId = createScheme(name, schemeType, description);
       navigate(`../${newId}`);
     } catch (error) {
       return error;
@@ -25,6 +29,18 @@ export function NewScheme() {
 
   return (
     <form action={formAction} className={styles.create_scheme_form_layout}>
+      <div className={styles.form_row}>
+        <label>
+          Scheme Type <span>*</span>
+        </label>
+        <VSegmentedControl
+          options={SchemeTypeOptions}
+          extendClassName={styles.custom_segment}
+          value={schemeType}
+          onChange={setSchemeType}
+        />
+        <input type="hidden" name="type" value={schemeType} />
+      </div>
       <div className={styles.form_row}>
         <label>
           Name <span>*</span>
diff --git a/src/stores/schemes.ts b/src/stores/schemes.ts
index 5b73fe2..198dd9b 100644
--- a/src/stores/schemes.ts
+++ b/src/stores/schemes.ts
@@ -74,7 +74,7 @@ export function useCreateScheme(): (
 ) => string {
   const updateSchemes = useSetAtom(schemesAtom);
   const createSchemeAction = useCallback(
-    (name: string, description?: string) => {
+    (name: string, type: SchemeType, description?: string) => {
       const newId = v4();
       updateSchemes((prev) => [
         ...prev,
@@ -112,7 +112,7 @@ export function useUpdateScheme(
             }
             return acc;
           },
-          [] as SchemeSet[],
+          [] as SchemeContent<SchemeStorage>[],
         ),
       );
     },