完成色轮选色的基础功能。

2025-01-03 17:22:10 +08:00
parent b206a58be1
commit 10f885526e
7 changed files with 274 additions and 0 deletions
@@ -0,0 +1,32 @@
+@layer pages {
+  .wheels_workspace {
+    flex-direction: column;
+  }
+  .explore_section {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .function_side {
+    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-s);
+    }
+    h5 {
+      padding-block: var(--spacing-m);
+      font-size: var(--font-size-m);
+    }
+  }
+  .wheel_side {
+    flex: 1;
+  }
+}
@@ -0,0 +1,49 @@
+import cx from 'clsx';
+import { useAtom } from 'jotai';
+import { useState } from 'react';
+import { ColorPicker } from '../components/ColorPicker';
+import { VSegmentedControl } from '../components/VSegmentedControl';
+import { ColorWheel } from '../page-components/wheels/ColorWheel';
+import { currentPickedColor } from '../stores/colors';
+import styles from './Wheels.module.css';
+
+export function Wheels() {
+  const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
+  const [selectedMode, setSelectedMode] = useState('complementary');
+
+  return (
+    <div className={cx('workspace', styles.wheels_workspace)}>
+      <header>
+        <h3>Color Wheels</h3>
+        <p>Choose the required color on the color wheel according to color theory.</p>
+      </header>
+      <section className={styles.explore_section}>
+        <aside className={styles.function_side}>
+          <div>
+            <h5>Basic color</h5>
+            <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
+          </div>
+          <div className={styles.mode_navigation}>
+            <h5>Color selection method</h5>
+            <VSegmentedControl
+              onChange={setSelectedMode}
+              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.wheel_side}>
+          <ColorWheel originColor={selectedColor} highlightMode={selectedMode} />
+        </div>
+      </section>
+    </div>
+  );
+}