增加Harmonies基本配置。

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;

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}>