From d8ed5dece06bc0908b0bca7f6f96e9b4b86854cf 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 16:48:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=8A=A8=E9=85=8D?=
 =?UTF-8?q?=E8=89=B2=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                    |  2 ++
 src/pages/Harmonies.module.css | 26 ++++++++++++++++++++++++++
 src/pages/Harmonies.tsx        | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 src/pages/Harmonies.module.css
 create mode 100644 src/pages/Harmonies.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8922571..9176676 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { ColorFunctionProvider } from './ColorFunctionContext';
 import { Notifications } from './components/Notifications';
+import { Harmonies } from './pages/Harmonies';
 import { Home } from './pages/Home';
 import { MainLayout } from './pages/MainLayout';
 import { NewScheme } from './pages/NewScheme';
@@ -23,6 +24,7 @@ const routes = createBrowserRouter([
           { path: ':id', element: <SchemeDetail /> },
         ],
       },
+      { path: 'harmonies', element: <Harmonies /> },
     ],
   },
 ]);
diff --git a/src/pages/Harmonies.module.css b/src/pages/Harmonies.module.css
new file mode 100644
index 0000000..21df628
--- /dev/null
+++ b/src/pages/Harmonies.module.css
@@ -0,0 +1,26 @@
+@layer pages {
+  .harmonies_workspace {
+    flex-direction: column;
+  }
+  .explore_section {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .function_side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    .mode_navigation {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-xs);
+    }
+  }
+  .preview_side {
+    flex: 1;
+  }
+}
diff --git a/src/pages/Harmonies.tsx b/src/pages/Harmonies.tsx
new file mode 100644
index 0000000..fc94f8d
--- /dev/null
+++ b/src/pages/Harmonies.tsx
@@ -0,0 +1,34 @@
+import cx from 'clsx';
+import { NavLink, Outlet } from 'react-router-dom';
+import styles from './Harmonies.module.css';
+
+export function Harmonies() {
+  return (
+    <div className={cx('workspace', styles.harmonies_workspace)}>
+      <header>
+        <h3>Color Harmonies</h3>
+        <p>Automatically select color combinations using color theory.</p>
+      </header>
+      <section className={styles.explore_section}>
+        <aside className={styles.function_side}>
+          <div>
+            <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>
+          </div>
+        </aside>
+        <div className={styles.preview_side}>
+          <Outlet />
+        </div>
+      </section>
+    </div>
+  );
+}