fix: letter spacing

QuiiBz · Dec 27, 2023 · 4edc464 · 4edc464
1 parent 2d43f0a
commit 4edc464
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/apps/dashboard/src/components/EditorToolbar.tsx b/apps/dashboard/src/components/EditorToolbar.tsx
@@ -39,6 +39,7 @@ export function EditorToolbar() {
         fontFamily: 'Inter',
         fontWeight: 400,
         lineHeight: 1,
+        letterSpacing: 0,
         fontSize: 50,
         align: 'left',
       }}>
@@ -99,6 +100,7 @@ export function EditorToolbar() {
         fontFamily: 'Inter',
         fontWeight: 400,
         lineHeight: 1,
+        letterSpacing: 0,
         fontSize: 50,
         align: 'left',
       }}>

diff --git a/apps/dashboard/src/components/RightPanel/FontSection.tsx b/apps/dashboard/src/components/RightPanel/FontSection.tsx
@@ -70,7 +70,12 @@ export function FontSection({ selectedElement }: FontSectionProps) {
         }} type="number" value={selectedElement.lineHeight}>
           <LineHeightIcon />
         </Input>
-        <Input max={5} min={0} onChange={() => { updateElement(selectedElement); }} type="number" value={0}>
+        <Input max={5} min={0} onChange={value => {
+          updateElement({
+            ...selectedElement,
+            letterSpacing: value,
+          });
+        }} type="number" value={selectedElement.letterSpacing}>
           <LetterSpacingIcon />
         </Input>
         <Select onChange={value => {

diff --git a/apps/dashboard/src/lib/elements.ts b/apps/dashboard/src/lib/elements.ts
@@ -61,6 +61,7 @@ export function createElementStyle(element: OGElement): CSSProperties {
       fontWeight: element.fontWeight,
       fontSize: `${element.fontSize}px`,
       lineHeight: element.lineHeight,
+      letterSpacing: `${element.letterSpacing}px`,
       textAlign: element.align,
       // By default, Satori sets a margin top and bottom on some elements:
       // https://github.com/vercel/satori/blob/29fe2e4a9676a1ba41c361ec1a547d6de329b039/src/handler/presets.ts#L15

diff --git a/apps/dashboard/src/lib/types.ts b/apps/dashboard/src/lib/types.ts
@@ -33,6 +33,7 @@ export interface OGPElement {
   fontWeight: number
   fontSize: number
   lineHeight: number
+  letterSpacing: number
   align: 'left' | 'center' | 'right'
 }