调整harmonies预览的动画。

src/page-components/harmonies/HarmonyPreview.module.css

@@ -0,0 +1,51 @@
+@layer pages {
+  .preview {
+    width: 100%;
+    padding: 0 var(--spacing-m);
+    display: flex;
+    flex-direction: column;
+    h5 {
+      font-size: var(--font-size-m);
+    }
+    .color_blocks {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: stretch;
+      flex-wrap: nowrap;
+      gap: var(--spacing-s);
+      .color_block {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--spacing-s);
+        flex-grow: 0;
+        flex-shrink: 1;
+        font-size: var(--font-size-m);
+        transition: flex-grow 300ms, width 300ms;
+        > * {
+          overflow: hidden;
+        }
+        .color_square {
+          border-radius: var(--border-radius-xxs);
+          height: 17em;
+        }
+        &.zero_width {
+          width: 0;
+        }
+        .color_ratio {
+          height: 1.5em;
+          padding-inline: var(--spacing-s);
+          font-size: var(--font-size-s);
+        }
+        .color_code {
+          height: 1.5em;
+          padding-inline: var(--spacing-s);
+          font-size: var(--font-size-s);
+          text-transform: uppercase;
+          text-align: right;
+        }
+      }
+    }
+  }
+}

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>
+  );
+}