From 4b50cbbeaa9d70dabb5c244f8c44b2e5fe8c309a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 30 Dec 2024 17:18:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Harmonies=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Harmonies.module.css |  4 ++++
 src/pages/Harmonies.tsx        | 24 +++++++++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/pages/Harmonies.module.css b/src/pages/Harmonies.module.css
index 21df628..fba500b 100644
--- a/src/pages/Harmonies.module.css
+++ b/src/pages/Harmonies.module.css
@@ -13,12 +13,16 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-m);
+    font-size: var(--font-size-s);
     .mode_navigation {
       display: flex;
       flex-direction: column;
       align-items: stretch;
       gap: var(--spacing-xs);
     }
+    h5 {
+      font-size: var(--font-size-m);
+    }
   }
   .preview_side {
     flex: 1;
diff --git a/src/pages/Harmonies.tsx b/src/pages/Harmonies.tsx
index fc94f8d..b72a6d6 100644
--- a/src/pages/Harmonies.tsx
+++ b/src/pages/Harmonies.tsx
@@ -1,5 +1,6 @@
 import cx from 'clsx';
-import { NavLink, Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
+import { VSegmentedControl } from '../components/VSegmentedControl';
 import styles from './Harmonies.module.css';
 
 export function Harmonies() {
@@ -15,14 +16,19 @@ export function Harmonies() {
             <h5>Basic color</h5>
           </div>
           <div className={styles.mode_navigation}>
-            <NavLink>Complementary</NavLink>
-            <NavLink>Analogous</NavLink>
-            <NavLink>Analogous with Complementary</NavLink>
-            <NavLink>Triadic</NavLink>
-            <NavLink>Split Complementary</NavLink>
-            <NavLink>Tetradic</NavLink>
-            <NavLink>Flip Tetradic</NavLink>
-            <NavLink>Square</NavLink>
+            <h5>Color selection method</h5>
+            <VSegmentedControl
+              options={[
+                { label: 'Complementary', value: 'complementary' },
+                { label: 'Analogous', value: 'analogous' },
+                { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
+                { label: 'Triadic', value: 'triadic' },
+                { label: 'Split Complementary', value: 'split_complementary' },
+                { label: 'Tetradic', value: 'tetradic' },
+                { label: 'Flip Tetradic', value: 'flip_tetradic' },
+                { label: 'Square', value: 'square' },
+              ]}
+            />
           </div>
         </aside>
         <div className={styles.preview_side}>