Fix typo

src/components/ColorPalette.jsx

@@ -0,0 +1,55 @@
+import { Button } from "@douyinfe/semi-ui";
+import { IconCheckboxTick } from "@douyinfe/semi-icons";
+import { tableThemes } from "../data/constants";
+
+export default function ColorPalette({
+  currentColor,
+  onClearColor,
+  onPickColor,
+}) {
+  return (
+    <div>
+      <div className="flex justify-between items-center p-2">
+        <div className="font-medium">Theme</div>
+        <Button type="tertiary" size="small" onClick={onClearColor}>
+          Clear
+        </Button>
+      </div>
+      <hr />
+      <div className="py-3 space-y-3">
+        <div>
+          {tableThemes.slice(0, Math.ceil(tableThemes.length / 2)).map((c) => (
+            <button
+              key={c}
+              style={{ backgroundColor: c }}
+              className="p-3 rounded-full mx-1"
+              onClick={() => onPickColor(c)}
+            >
+              {currentColor === c ? (
+                <IconCheckboxTick style={{ color: "white" }} />
+              ) : (
+                <IconCheckboxTick style={{ color: c }} />
+              )}
+            </button>
+          ))}
+        </div>
+        <div>
+          {tableThemes.slice(Math.ceil(tableThemes.length / 2)).map((c) => (
+            <button
+              key={c}
+              style={{ backgroundColor: c }}
+              className="p-3 rounded-full mx-1"
+              onClick={() => onPickColor(c)}
+            >
+              <IconCheckboxTick
+                style={{
+                  color: currentColor === c ? "white" : c,
+                }}
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}