color-q/src/pages/LightenDarken.tsx

import cx from 'clsx';
import { useAtom } from 'jotai';
import { isEqual } from 'lodash-es';
import { useState } from 'react';
import { ColorPicker } from '../components/ColorPicker';
import { HSegmentedControl } from '../components/HSegmentedControl';
import { Labeled } from '../components/Labeled';
import { LabeledPicker } from '../components/LabeledPicker';
import { ScrollArea } from '../components/ScrollArea';
import { VSegmentedControl } from '../components/VSegmentedControl';
import { Darkens } from '../page-components/lighten-darken/darkens';
import { Lightens } from '../page-components/lighten-darken/lightens';
import { currentPickedColor } from '../stores/colors';
import styles from './LightenDarken.module.css';

export function LightenDarken() {
  const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
  const [lighten, setLighten] = useState(3);
  const [darken, setDarken] = useState(3);
  const [steps, setSteps] = useState(10);
  const [maximum, setMaximum] = useState(90);
  const [mixMode, setMixMode] = useState<'progressive' | 'average'>('progressive');
  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');

  return (
    <div className={cx('workspace', styles.lighten_workspace)}>
      {' '}
      <header>
        <h3>Lighten & Darken</h3>
        <p>By varying the brightness of a specified color, produced a series of colors.</p>
      </header>
      <ScrollArea enableY>
        <section className={styles.explore_section}>
          <aside className={styles.function_side}>
            <div>
              <h5>Basic color</h5>
              <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
            </div>
            <div>
              <h5>Series Setting</h5>
              <LabeledPicker
                title="Lighten"
                min={1}
                max={10}
                step={1}
                value={lighten}
                onChange={setLighten}
              />
              <LabeledPicker
                title="Darken"
                min={1}
                max={10}
                step={1}
                value={darken}
                onChange={setDarken}
              />
              <Labeled label="Generate Mode">
                <VSegmentedControl
                  options={[
                    { label: 'Progressive', value: 'progressive' },
                    { label: 'Linear', value: 'linear' },
                    { label: 'Average', value: 'average' },
                  ]}
                  value={mixMode}
                  onChange={(value) => {
                    setMixMode(value as 'progressive' | 'average');
                    console.debug('[Mix Mode Switch]', value);
                  }}
                />
              </Labeled>
              {(isEqual(mixMode, 'progressive') || isEqual(mixMode, 'linear')) && (
                <LabeledPicker
                  title="Step"
                  min={10}
                  max={25}
                  step={1}
                  value={steps}
                  onChange={setSteps}
                />
              )}
              {isEqual(mixMode, 'average') && (
                <LabeledPicker
                  title="Maximum"
                  min={10}
                  max={100}
                  step={1}
                  value={maximum}
                  onChange={setMaximum}
                />
              )}
            </div>
          </aside>
          <div className={styles.lights_content}>
            <h5>Lighten Series</h5>
            <div className={styles.colors_booth}>
              <Lightens
                color={selectedColor}
                step={steps / 100}
                lightens={lighten}
                mix={mixMode}
                maximum={maximum}
                copyMode={mode}
              />
            </div>
            <h5>Darken Series</h5>
            <div className={styles.colors_booth}>
              <Darkens
                color={selectedColor}
                step={steps / 100}
                darkens={darken}
                mix={mixMode}
                maximum={maximum}
                copyMode={mode}
              />
            </div>
            <div className={styles.color_value_mode}>
              <label>Copy color value in</label>
              <HSegmentedControl
                options={[
                  { label: 'HEX', value: 'hex' },
                  { label: 'RGB', value: 'rgb' },
                  { label: 'HSL', value: 'hsl' },
                  { label: 'LAB', value: 'lab' },
                  { label: 'OKLCH', value: 'oklch' },
                ]}
                valu={mode}
                onChange={setMode}
              />
            </div>
          </div>
        </section>
      </ScrollArea>
    </div>
  );
}