调整harmonies预览的动画。

src/page-components/harmonies/HarmonyPreview.tsx

@@ -0,0 +1,40 @@
+import cx from 'clsx';
+import { constant, flatten, isEqual, take, times } from 'lodash-es';
+import { useMemo } from 'react';
+import { HarmonyColor } from '../../models';
+import styles from './HarmonyPreview.module.css';
+
+type HarmonyPreviewProps = {
+  colors?: HarmonyColor[];
+};
+
+export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
+  const extendedColors = useMemo(() => {
+    const sortedColors = colors.sort((a, b) => -(a.ratio - b.ratio));
+    if (sortedColors.length >= 4) {
+      return take(sortedColors, 4);
+    }
+    return flatten([
+      ...sortedColors,
+      times(4 - sortedColors.length, constant({ color: '', ratio: 0 })),
+    ]);
+  }, [colors]);
+
+  return (
+    <div className={styles.preview}>
+      <h5>Harmony Preview</h5>
+      <div className={styles.color_blocks}>
+        {extendedColors.map(({ color, ratio }, index) => (
+          <div
+            key={index}
+            className={cx(styles.color_block, isEqual(ratio, 0) && styles.zero_width)}
+            style={{ flexGrow: ratio }}>
+            <div className={styles.color_ratio}>{ratio > 0 && `Ratio: ${ratio}`}</div>
+            <div className={styles.color_square} style={{ backgroundColor: `#${color}` }}></div>
+            <div className={styles.color_code}>{ratio > 0 && `#${color}`}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}