feat: font size to text panel

2 files changed, 32 insertions, 9 deletions

diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index c28a9ed0..c003f192 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -10,6 +10,8 @@ import {
 import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";

 import { TextElement } from "@/types/timeline";

 import { useTimelineStore } from "@/stores/timeline-store";

+import { Slider } from "@/components/ui/slider";

+import { Input } from "@/components/ui/input";

 

 export function TextProperties({

   element,

@@ -50,6 +52,34 @@ export function TextProperties({
           </SelectContent>

         </Select>

       </div>

+      <div className="flex flex-col gap-2">

+        <Label className="text-xs">Font size</Label>

+        <div className="flex items-center  gap-2">

+          <Slider

+            defaultValue={[element.fontSize]}

+            min={8}

+            max={200}

+            step={1}

+            onValueChange={([value]) =>

+              updateTextElement(trackId, element.id, { fontSize: value })

+            }

+            className="w-full"

+          />

+          <Input

+            type="number"

+            value={element.fontSize}

+            onChange={(e) =>

+              updateTextElement(trackId, element.id, {

+                fontSize: parseInt(e.target.value),

+              })

+            }

+            className="w-12 !text-xs h-7 rounded-sm text-center

+             [appearance:textfield]

+             [&::-webkit-outer-spin-button]:appearance-none

+             [&::-webkit-inner-spin-button]:appearance-none"

+          />

+        </div>

+      </div>

     </div>

   );

 }

diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 72314045..8fc31a58 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -11,14 +11,7 @@ interface InputProps extends React.ComponentProps<"input"> {
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
-    {
-      className,
-      type,
-      showPassword,
-      onShowPasswordChange,
-      value,
-      ...props
-    },
+    { className, type, showPassword, onShowPasswordChange, value, ...props },
     ref
   ) => {
     const isPassword = type === "password";
@@ -26,7 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const inputType = isPassword && showPassword ? "text" : type;
 
     return (
-      <div className="relative w-full">
+      <div className={showPassword ? "relative w-full" : ""}>
         <input
           type={inputType}
           className={cn(