From 11cc3aa783c9fad84658f4afbd25c05be3e672ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 8 Aug 2024 14:37:40 -0500
Subject: [PATCH] feat: more controllers

---
 .../customize/[embed]/components/Radius.tsx   |  1 +
 .../customize/[embed]/components/Size.tsx     | 24 ++++++++++++++
 .../[embed]/components/SizeWithout0.tsx       | 24 ++++++++++++++
 .../customize/[embed]/components/Slider.tsx   | 33 +++++++++++++++++++
 .../customize/[embed]/components/Text.tsx     | 19 +++++++++++
 .../tools/embed/customize/[embed]/page.tsx    | 26 ++++++++++++++-
 6 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 src/app/tools/embed/customize/[embed]/components/Size.tsx
 create mode 100644 src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx
 create mode 100644 src/app/tools/embed/customize/[embed]/components/Slider.tsx
 create mode 100644 src/app/tools/embed/customize/[embed]/components/Text.tsx

diff --git a/src/app/tools/embed/customize/[embed]/components/Radius.tsx b/src/app/tools/embed/customize/[embed]/components/Radius.tsx
index 806975919..6d02f97fc 100644
--- a/src/app/tools/embed/customize/[embed]/components/Radius.tsx
+++ b/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}
diff --git a/src/app/tools/embed/customize/[embed]/components/Size.tsx b/src/app/tools/embed/customize/[embed]/components/Size.tsx
new file mode 100644
index 000000000..f92e15126
--- /dev/null
+++ b/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}`;
+        });
+      }}
+    />
+  );
+}
diff --git a/src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx b/src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx
new file mode 100644
index 000000000..092cc0fe8
--- /dev/null
+++ b/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}`;
+        });
+      }}
+    />
+  );
+}
diff --git a/src/app/tools/embed/customize/[embed]/components/Slider.tsx b/src/app/tools/embed/customize/[embed]/components/Slider.tsx
new file mode 100644
index 000000000..c0d461a00
--- /dev/null
+++ b/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}`;
+        });
+      }}
+    />
+  );
+}
diff --git a/src/app/tools/embed/customize/[embed]/components/Text.tsx b/src/app/tools/embed/customize/[embed]/components/Text.tsx
new file mode 100644
index 000000000..9e55ab579
--- /dev/null
+++ b/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;
+        });
+      }}
+    />
+  );
+}
diff --git a/src/app/tools/embed/customize/[embed]/page.tsx b/src/app/tools/embed/customize/[embed]/page.tsx
index 550c4c8d0..94fe6320f 100644
--- a/src/app/tools/embed/customize/[embed]/page.tsx
+++ b/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>