feat: full rich text

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>
   );
 }