feat: more controllers

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

@@ -4,6 +4,7 @@ import { EmbedPreviewControllerProps } from '../page';
 
 export function Radius({ configKey }: EmbedPreviewControllerProps) {
   const mutateEmbedState = EmbedState.useMutation();
+
   return (
     <Slider
       min={0}

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

@@ -0,0 +1,24 @@
+import { Slider } from '@radix-ui/themes';
+import * as EmbedState from '../../../../../../stores/embedState';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function Size({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Slider
+      min={0}
+      max={9}
+      value={[
+        EmbedState.use((state) =>
+          parseInt(state[configKey] as EmbedState.RadixSize),
+        ),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = `${value}`;
+        });
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,24 @@
+import { Slider } from '@radix-ui/themes';
+import * as EmbedState from '../../../../../../stores/embedState';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Slider
+      min={1}
+      max={9}
+      value={[
+        EmbedState.use((state) =>
+          parseInt(state[configKey] as EmbedState.RadixSizeWithout0),
+        ),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = `${value}`;
+        });
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Slider as RadixSlider } from '@radix-ui/themes';
+import * as EmbedState from '../../../../../../stores/embedState';
+import {
+  EmbedConfigItemType,
+  EmbedItemType,
+} from '../../../../../../stores/embedState/constants';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function Slider({
+  configKey,
+  config,
+}: EmbedPreviewControllerProps & {
+  config: EmbedConfigItemType<EmbedItemType.Slider>;
+}) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <RadixSlider
+      min={config.min}
+      max={config.max}
+      value={[
+        EmbedState.use((state) =>
+          parseInt(state[configKey] as EmbedState.RadixSize),
+        ),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = `${value}`;
+        });
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,19 @@
+import { TextField } from '@radix-ui/themes';
+import * as EmbedState from '../../../../../../stores/embedState';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function Text({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <TextField.Root
+      placeholder="Empty"
+      value={EmbedState.use((state) => state[configKey] as string)}
+      onChange={(event) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = event.target.value;
+        });
+      }}
+    />
+  );
+}

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

@@ -13,6 +13,10 @@ import { configurations, previews } from '../../configurations';
 import { Boolean } from './components/Boolean';
 import { Color } from './components/Color';
 import { Radius } from './components/Radius';
+import { Size } from './components/Size';
+import { SizeWithout0 } from './components/SizeWithout0';
+import { Slider } from './components/Slider';
+import { Text as TextController } from './components/Text';
 
 export interface EmbedPreviewControllerProps {
   configKey: string;
@@ -71,6 +75,26 @@ export default function Page({
                   control = <Radius configKey={configKey} />;
                   break;
                 }
+
+                case EmbedItemType.Size: {
+                  control = <Size configKey={configKey} />;
+                  break;
+                }
+
+                case EmbedItemType.SizeWithout0: {
+                  control = <SizeWithout0 configKey={configKey} />;
+                  break;
+                }
+
+                case EmbedItemType.Slider: {
+                  control = <Slider configKey={configKey} config={item} />;
+                  break;
+                }
+
+                case EmbedItemType.String: {
+                  control = <TextController configKey={configKey} />;
+                  break;
+                }
               }
 
               return (
@@ -78,7 +102,7 @@ export default function Page({
                   direction={oneLiner ? undefined : 'column'}
                   gap={oneLiner ? '2' : '1'}
                   justify={oneLiner ? 'between' : undefined}
-                  mb="2"
+                  mb={oneLiner ? '2' : '4'}
                   pb={item.pad ? '6' : undefined}
                 >
                   <Text>{capitalize(startCase(configKey as string))}</Text>