feat: more controllers!!!

src/app/tools/embed/configurations/breakdown.tsx

@@ -56,7 +56,7 @@ export const breakdownConfig = {
   },
   columnLabel: {
     type: EmbedItemType.RichText,
-    default: { color: 'gray', size: '2', weight: 'regular' },
+    default: { color: grayDark.gray11, size: '2', weight: 'regular' },
     pad: true,
   },
 

src/app/tools/embed/customize/[embed]/components/Color.tsx

@@ -1,47 +0,0 @@
-import { Slider } from '@radix-ui/themes';
-import { useRef } from 'react';
-import * as EmbedState from '../../../../../../stores/embedState';
-import { EmbedPreviewControllerProps } from '../page';
-
-export function Color({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-  const input = useRef<HTMLInputElement>(null);
-
-  return (
-    <>
-      <input
-        ref={input}
-        type="color"
-        value={EmbedState.use((state) =>
-          (state[configKey] as string).slice(0, 7),
-        )}
-        onChange={(event) => {
-          mutateEmbedState((draft) => {
-            let alpha = (draft[configKey] as string).slice(7, 9);
-            if (alpha.length === 0) alpha = 'ff';
-            draft[configKey] = `${event.target.value}${alpha}`;
-          });
-        }}
-      />
-      <Slider
-        min={0}
-        max={255}
-        value={[
-          EmbedState.use((state) => {
-            let alpha = (state[configKey] as string).slice(7, 9);
-            if (alpha.length === 0) return 255;
-            return parseInt(alpha, 16);
-          }),
-        ]}
-        onValueChange={([value]) => {
-          mutateEmbedState((draft) => {
-            if (!input.current) return;
-
-            const color = input.current.value;
-            draft[configKey] = `${color}${value.toString(16)}`;
-          });
-        }}
-      />
-    </>
-  );
-}

src/app/tools/embed/customize/[embed]/components/Color/components/ColorControllerRaw.tsx

@@ -0,0 +1,37 @@
+import { Slider } from '@radix-ui/themes';
+
+interface ColorControllerRawProps {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export function ColorControllerRaw({
+  value,
+  onValueChange,
+}: ColorControllerRawProps) {
+  const tintString = value.slice(0, 7);
+  const alphaString = value.slice(7, 9);
+  const alpha = alphaString.length === 0 ? 255 : parseInt(alphaString, 16);
+
+  return (
+    <>
+      <input
+        type="color"
+        value={value.slice(0, 7)}
+        onChange={(event) => {
+          let alpha = value.slice(7, 9);
+          if (alpha.length === 0) alpha = 'ff';
+          onValueChange(`${event.target.value}${alpha}`);
+        }}
+      />
+      <Slider
+        min={0}
+        max={255}
+        value={[alpha]}
+        onValueChange={([value]) => {
+          onValueChange(`${tintString}${value.toString(16)}`);
+        }}
+      />
+    </>
+  );
+}

src/app/tools/embed/customize/[embed]/components/Color/index.tsx

@@ -0,0 +1,19 @@
+import * as EmbedState from '../../../../../../../stores/embedState';
+import { EmbedPreviewControllerProps } from '../../page';
+import { ColorControllerRaw } from './components/ColorControllerRaw';
+
+export function Color({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+  const color = EmbedState.use((state) => state[configKey] as string);
+
+  return (
+    <ColorControllerRaw
+      value={color}
+      onValueChange={(value) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = value;
+        });
+      }}
+    />
+  );
+}

src/app/tools/embed/customize/[embed]/components/RichText.tsx

@@ -0,0 +1,34 @@
+import * as EmbedState from '../../../../../../stores/embedState';
+import {
+  EmbedConfigItemType,
+  EmbedItemType,
+} from '../../../../../../stores/embedState/constants';
+import { EmbedPreviewControllerProps } from '../page';
+import { ColorControllerRaw } from './Color/components/ColorControllerRaw';
+
+export function RichText({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+  const state = EmbedState.use(
+    (state) =>
+      state[
+        configKey
+      ] as EmbedConfigItemType<EmbedItemType.RichText>['default'],
+  );
+
+  console.log(state);
+
+  return (
+    <ColorControllerRaw
+      value={state.color}
+      onValueChange={(value) => {
+        mutateEmbedState((draft) => {
+          (
+            draft[
+              configKey
+            ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+          ).color = value;
+        });
+      }}
+    />
+  );
+}

src/app/tools/embed/customize/[embed]/page.tsx

@@ -13,6 +13,7 @@ import { configurations, previews } from '../../configurations';
 import { Boolean } from './components/Boolean';
 import { Color } from './components/Color';
 import { Radius } from './components/Radius';
+import { RichText } from './components/RichText';
 import { Size } from './components/Size';
 import { SizeWithout0 } from './components/SizeWithout0';
 import { Slider } from './components/Slider';
@@ -95,6 +96,10 @@ export default function Page({
                   control = <TextController configKey={configKey} />;
                   break;
                 }
+
+                case EmbedItemType.RichText: {
+                  control = <RichText configKey={configKey} />;
+                }
               }
 
               return (