From b9d5cd849d450854634f2212fa534bc03832cef6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 17:13:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4harmonies=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E7=9A=84=E5=8A=A8=E7=94=BB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../harmonies/HarmonyPreview.module.css       | 51 +++++++++++++++++++
 .../harmonies/HarmonyPreview.tsx              | 40 +++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 src/page-components/harmonies/HarmonyPreview.module.css
 create mode 100644 src/page-components/harmonies/HarmonyPreview.tsx

diff --git a/src/page-components/harmonies/HarmonyPreview.module.css b/src/page-components/harmonies/HarmonyPreview.module.css
new file mode 100644
index 0000000..6bee54a
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+}
diff --git a/src/page-components/harmonies/HarmonyPreview.tsx b/src/page-components/harmonies/HarmonyPreview.tsx
new file mode 100644
index 0000000..7540ce8
--- /dev/null
+++ b/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>
+  );
+}