62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
import cx from 'clsx';
|
|
import { useState } from 'react';
|
|
import { ColorPicker } from '../components/ColorPicker';
|
|
import { HSegmentedControl } from '../components/HSegmentedControl';
|
|
import { Labeled } from '../components/Labeled';
|
|
import { ScrollArea } from '../components/ScrollArea';
|
|
import { HCTCompare } from '../page-components/color-compare/HCTCompare';
|
|
import { HSLCompare } from '../page-components/color-compare/HSLCompare';
|
|
import { OklchCompare } from '../page-components/color-compare/OKLCHCompare';
|
|
import { RGBCompare } from '../page-components/color-compare/RGBCompare';
|
|
import { ShadeScale } from '../page-components/color-compare/ShadeScale';
|
|
import { TintScale } from '../page-components/color-compare/TintScale';
|
|
import styles from './Compare.module.css';
|
|
|
|
export function ColorCompare() {
|
|
const [basicColor, setBasicColor] = useState('000000');
|
|
const [compareColor, setCompareColor] = useState('000000');
|
|
const [analysisMode, setMode] = useState<'relative' | 'absolute'>('relative');
|
|
|
|
return (
|
|
<div className={cx('workspace', styles.compare_workspace)}>
|
|
<header>
|
|
<h3>Color Compare</h3>
|
|
<p>
|
|
Compare the properties of two colors and find the associated patterns of color change.
|
|
</p>
|
|
</header>
|
|
<ScrollArea enableY>
|
|
<div className={styles.compare_content}>
|
|
<div className={styles.compare_column}>
|
|
<h5>Basic Color</h5>
|
|
<ColorPicker color={basicColor} onSelect={setBasicColor} />
|
|
</div>
|
|
<div className={styles.compare_column}>
|
|
<h5>Compare Color</h5>
|
|
<ColorPicker color={compareColor} onSelect={setCompareColor} />
|
|
</div>
|
|
<div className={styles.compare_column}>
|
|
<h5>Compare Result</h5>
|
|
<Labeled label="Analysis Mode">
|
|
<HSegmentedControl
|
|
options={[
|
|
{ label: 'Absolute', value: 'absolute' },
|
|
{ label: 'Relative', value: 'relative' },
|
|
]}
|
|
value={analysisMode}
|
|
onChange={(v) => setMode(v as Parameters<typeof setMode>[0])}
|
|
/>
|
|
</Labeled>
|
|
<RGBCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
|
|
<HSLCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
|
|
<HCTCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
|
|
<OklchCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
|
|
<TintScale basic={basicColor} compare={compareColor} />
|
|
<ShadeScale basic={basicColor} compare={compareColor} />
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|