chore(ui): add react gradient colour picker

2026-06-06 11:44:40 +00:00 · 2024-09-19 14:47:35 +10:00
parent 90a4c8f048
commit 831853798e
10 changed files with 207 additions and 138 deletions
@@ -0,0 +1,70 @@
+import ColorPicker from 'react-best-gradient-color-picker';
+import { useEffect, useState } from 'react';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
+
+const defaultPresets = [
+  'linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)',
+  'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
+  'linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)',
+  'linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)',
+  'linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)',
+  'linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)',
+  'radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)',
+  'radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)',
+  'linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)',
+  'rgba(114, 1, 170, 0.89)',
+  'rgba(93, 135, 63, 0.89)',
+  'rgba(4, 4, 138, 0.77)',
+  'rgba(21, 20, 20, 0.89)',
+  'linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)',
+  'radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)',
+  'rgba(17, 94, 89, 1)',
+  'rgba(30, 64, 175, 0.89)',
+  'rgba(134, 25, 143, 1)',
+  'rgba(14, 165, 233, 0.9)'
+];
+
+function Picker() {
+  const [customThemeColor, setCustomThemeColor] = useState(() => {
+    return settingsState.selectedColor
+  });
+  const [presets, setPresets] = useState(() => {
+    const savedPresets = localStorage.getItem('colorPickerPresets');
+    return savedPresets ? JSON.parse(savedPresets) : defaultPresets;
+  });
+
+
+  useEffect(() => {
+    // on component dismount, save the presets to local storage
+    return () => {
+      // Check if the selected color is already in the presets
+      const existingIndex = presets.indexOf(customThemeColor);
+
+      let updatedPresets;
+      if (existingIndex > -1) {
+        // If the color exists, move it to the front
+        updatedPresets = [
+          customThemeColor,
+          ...presets.slice(0, existingIndex),
+          ...presets.slice(existingIndex + 1)
+        ];
+      } else {
+        // If the color is new, add it to the front and slice the array
+        updatedPresets = [customThemeColor, ...presets].slice(0, 18);
+      }
+
+      setPresets(updatedPresets);
+      localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets));
+    }
+  }, []);
+
+  useEffect(() => {
+    settingsState.selectedColor = customThemeColor;
+  }, [customThemeColor]);
+
+  return (
+    <ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={customThemeColor} onChange={setCustomThemeColor} />
+  );
+}
+
+export default Picker;