+
+
+ Blob generator
+
);
diff --git a/src/components/settings/colorPicker.jsx b/src/components/settings/colorPicker.jsx
new file mode 100644
index 0000000..646f6a5
--- /dev/null
+++ b/src/components/settings/colorPicker.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Popover, Divider, Input } from "antd";
+import { view } from "@risingstack/react-easy-state";
+import { appStore } from "../../store";
+import hexValidator from "../../services/hex-validator";
+
+const ColorPicker = view(() => {
+ const [val, setVal] = useState(appStore.color);
+ const colors = [
+ "#00cec9",
+ "#fab1a0",
+ "#fdcb6e",
+ "#fd79a8",
+ "#a29bfe",
+ "#B53471",
+ ];
+ const content = () => {
+ return (
+
+
+ {colors.map((color, i) => {
+ return (
+
{
+ setVal(color);
+ appStore.type = "color";
+ appStore.color = color;
+ }}
+ >
+ );
+ })}
+
+
+
{
+ setVal(e.target.value);
+ }}
+ onPressEnter={(e) => {
+ if (!hexValidator(e.target.value)) return;
+ setVal(e.target.value);
+ appStore.type = "color";
+ appStore.color = e.target.value;
+ }}
+ />
+
+ );
+ };
+
+ const getBgCss = () => {
+ if (appStore.type == "color") {
+ return { backgroundColor: appStore.color };
+ }
+ return { backgroundColor: "#d1d8e0" };
+ };
+ return (
+
+
+
+ );
+});
+
+export default ColorPicker;
diff --git a/src/components/settings/gradientPicker.jsx b/src/components/settings/gradientPicker.jsx
new file mode 100644
index 0000000..1fbf731
--- /dev/null
+++ b/src/components/settings/gradientPicker.jsx
@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Popover, Input } from "antd";
+import { view } from "@risingstack/react-easy-state";
+import { appStore } from "../../store";
+import hexValidator from "../../services/hex-validator";
+
+const GradientPicker = view(() => {
+ const [val, setVal] = useState(appStore.gradient);
+ const colors = [
+ ["#e96443", "#904e95"],
+ ["#FF5F6D", "#FFC371"],
+ ["#EECDA3", "#EF629F"],
+ ["#4CA1AF", "#C4E0E5"],
+ ["#c2e59c", "#64b3f4"],
+ ["#3CA55C", "#B5AC49"],
+ ];
+ const getBgCss = (color = null) => {
+ let cols = color;
+ if (!cols)
+ cols =
+ appStore.type == "gradient"
+ ? appStore.gradient
+ : ["#d1d8e0", "#4a5568"];
+ return {
+ background: `linear-gradient(
+ 180deg,
+ ${cols[0]} 0%,
+ ${cols[1]} 100%
+ )`,
+ };
+ };
+ const content = () => {
+ return (
+
+
+ {colors.map((color, i) => {
+ return (
+
{
+ setVal(color);
+ appStore.type = "gradient";
+ appStore.gradient = color;
+ }}
+ >
+ );
+ })}
+
+
+
+
+ );
+ };
+ return (
+
+
+
+ );
+});
+
+export default GradientPicker;
diff --git a/src/components/settings/settings.jsx b/src/components/settings/settings.jsx
index 87cf855..1a14f73 100644
--- a/src/components/settings/settings.jsx
+++ b/src/components/settings/settings.jsx
@@ -3,6 +3,9 @@ import SettingsItem from "../common/settingsItem";
import EdgesSlider from "./edgesSlider";
import GrowthSlider from "./growthSlider";
import Links from "./links";
+import ColorPicker from "./colorPicker";
+import GradientPicker from "./gradientPicker";
+import Stroke from "./stroke";
export default function Settings() {
const edgeInfo =
@@ -17,6 +20,14 @@ export default function Settings() {
+
+