text alignment

src/pages/editor/components/sidebar/settings/TextSettings.tsx

@@ -21,6 +21,15 @@ const normalizeNumericInput = (value: string): string => {
 const parseNumber = (value: string): number => Number(normalizeNumericInput(value));
 
 const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
+    const textAlign = selectedObject.textAlign ?? "right";
+
+    const alignButtonClass = (align: "right" | "center" | "left") =>
+        `rounded-md border px-3 py-1 text-xs transition-colors ${
+            textAlign === align
+                ? "border-blue-500 bg-blue-50 text-blue-700"
+                : "border-border text-foreground hover:bg-muted"
+        }`;
+
     return (
         <>
             <Input
@@ -51,6 +60,32 @@ const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
                     })
                 }
             />
+            <div className="space-y-2">
+                <p className="text-sm">چینش متن</p>
+                <div className="grid grid-cols-3 gap-2">
+                    <button
+                        type="button"
+                        className={alignButtonClass("right")}
+                        onClick={() => onUpdate(selectedObject.id, { textAlign: "right" })}
+                    >
+                        راست
+                    </button>
+                    <button
+                        type="button"
+                        className={alignButtonClass("center")}
+                        onClick={() => onUpdate(selectedObject.id, { textAlign: "center" })}
+                    >
+                        وسط
+                    </button>
+                    <button
+                        type="button"
+                        className={alignButtonClass("left")}
+                        onClick={() => onUpdate(selectedObject.id, { textAlign: "left" })}
+                    >
+                        چپ
+                    </button>
+                </div>
+            </div>
             <ColorPicker
                 label="رنگ متن"
                 value={selectedObject.fill || "#000000"}