From 8d190b62b0da5ce7fe60ceab15bbe53555b2f2e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 26 Oct 2024 14:59:52 -0500
Subject: [PATCH] feat: full rich text

---
 .../src/components/Embeds/RichText.tsx        | 81 +++++++++++++++----
 1 file changed, 65 insertions(+), 16 deletions(-)

diff --git a/packages/website/src/components/Embeds/RichText.tsx b/packages/website/src/components/Embeds/RichText.tsx
index ad7bfd8db..76fe0acf2 100644
--- a/packages/website/src/components/Embeds/RichText.tsx
+++ b/packages/website/src/components/Embeds/RichText.tsx
@@ -1,8 +1,11 @@
+import { FontBoldIcon, FontSizeIcon } from '@radix-ui/react-icons';
+import { Flex, Slider, Text } from '@radix-ui/themes';
 import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
-import { EmbedState } from '../../stores/embedState';
-import type {
-  EmbedConfigItemType,
-  EmbedItemType,
+import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
+import {
+  radixTextWeights,
+  type EmbedConfigItemType,
+  type EmbedItemType,
 } from '../../stores/embedState/constants';
 import { ColorControllerRaw } from './ColorControllerRaw';
 
@@ -16,17 +19,63 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
   );
 
   return (
-    <ColorControllerRaw
-      value={state.color}
-      onValueChange={(value) => {
-        mutateEmbedState((draft) => {
-          (
-            draft[
-              configKey
-            ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
-          ).color = value;
-        });
-      }}
-    />
+    <Flex direction="column" flexGrow="1" gap="2">
+      <Flex gap="2" align="center">
+        <ColorControllerRaw
+          value={state.color}
+          onValueChange={(value) => {
+            mutateEmbedState((draft) => {
+              (
+                draft[
+                  configKey
+                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+              ).color = value;
+            });
+          }}
+        />
+      </Flex>
+
+      <Flex align="center" gap="2" py="2">
+        <Text size="4" trim="both">
+          <FontSizeIcon width="1em" height="1em" />
+        </Text>
+        <Slider
+          variant="soft"
+          min={1}
+          max={9}
+          value={[Number(state.size)]}
+          onValueChange={([value]) => {
+            mutateEmbedState((draft) => {
+              (
+                draft[
+                  configKey
+                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+              ).size = `${value}` as RadixSizeWithout0;
+            });
+          }}
+        />
+      </Flex>
+
+      <Flex align="center" gap="2" py="2">
+        <Text size="4" trim="both">
+          <FontBoldIcon width="1em" height="1em" />
+        </Text>
+        <Slider
+          variant="soft"
+          min={0}
+          max={radixTextWeights.length - 1}
+          value={[radixTextWeights.indexOf(state.weight)]}
+          onValueChange={([value]) => {
+            mutateEmbedState((draft) => {
+              (
+                draft[
+                  configKey
+                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+              ).weight = radixTextWeights[value];
+            });
+          }}
+        />
+      </Flex>
+    </Flex>
   );
 }