重构对于Scheme类型的展示。

src/components/SchemeSign.tsx

@@ -0,0 +1,33 @@
+import cx from 'clsx';
+import { isNil } from 'lodash-es';
+import { useMemo } from 'react';
+import { schemeType, SchemeType } from '../models';
+import { Badge } from './Badge';
+import styles from './SchemeSign.module.css';
+
+type SchemeSignProps = {
+  scheme?: SchemeType;
+  short?: boolean;
+};
+
+export function SchemeSign({ scheme, short = false }: SchemeSignProps) {
+  const schemeName = schemeType(scheme, short);
+  const signColorStyles = useMemo(() => {
+    switch (scheme) {
+      case 'q_scheme':
+        return styles.q;
+      case 'swatch_scheme':
+        return styles.swatch;
+      case 'material_2':
+        return styles.m2;
+      case 'material_3':
+        return styles.m3;
+    }
+  }, [scheme]);
+
+  return (
+    !isNil(scheme) && (
+      <Badge extendClassName={cx(styles.badge, signColorStyles)}>{schemeName}</Badge>
+    )
+  );
+}