space border to top

src/pages/editor/components/sidebar/ObjectSettings.tsx

@@ -1,20 +1,20 @@
 import { Trash } from "iconsax-react";
 import type { EditorObject } from "../../store/editorStore";
-import {
-    ShapeSettings,
-    TextSettings,
-    LineSettings,
-    SizeSettings,
-    LinkSettings,
-    VideoSettings,
-    AudioSettings,
-    AlignmentSettings,
-    TransformSettings,
-    GridSettings,
-    MaskSettings,
-    EntranceAnimationSettings,
-} from "./settings";
 import TextInstruction from "./instructions/TextInstruction";
+import {
+  AlignmentSettings,
+  AudioSettings,
+  EntranceAnimationSettings,
+  GridSettings,
+  LineSettings,
+  LinkSettings,
+  MaskSettings,
+  ShapeSettings,
+  SizeSettings,
+  TextSettings,
+  TransformSettings,
+  VideoSettings,
+} from "./settings";
 
 type ObjectSettingsProps = {
   selectedObject: EditorObject;
@@ -45,13 +45,7 @@ const roundNumbersDeep = <T,>(value: T): T => {
   return value;
 };
 
-const ObjectSettings = ({
+const ObjectSettings = ({ selectedObject, pageWidth, pageHeight, onUpdate, onDelete }: ObjectSettingsProps) => {
-    selectedObject,
-    pageWidth,
-    pageHeight,
-    onUpdate,
-    onDelete,
-}: ObjectSettingsProps) => {
   const roundedSelectedObject = roundNumbersDeep(selectedObject);
 
   const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => {
@@ -60,53 +54,32 @@ const ObjectSettings = ({
 
   return (
     <div className="space-y-4">
-            <div className="flex items-center justify-between pb-4">
+      <div className="flex items-center justify-between border-b border-border pb-3">
         <h3 className="text-sm font-medium">تنظیمات شیء</h3>
-                <button
+        <button onClick={() => onDelete(selectedObject.id)} className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500">
-                    onClick={() => onDelete(selectedObject.id)}
-                    className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500"
-                >
           <Trash size={20} />
         </button>
       </div>
 
-            <AlignmentSettings
+      <AlignmentSettings pageWidth={pageWidth} pageHeight={pageHeight} onUpdate={handleRoundedUpdate} />
-                pageWidth={pageWidth}
-                pageHeight={pageHeight}
-                onUpdate={handleRoundedUpdate}
-            />
 
       {/* Mask Settings for all objects */}
       <MaskSettings objectId={roundedSelectedObject.id} />
 
       {roundedSelectedObject.type === "text" && <TextInstruction />}
-            {roundedSelectedObject.type === "text" && (
+      {roundedSelectedObject.type === "text" && <TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            {roundedSelectedObject.type === "rectangle" && (
+      {roundedSelectedObject.type === "rectangle" && <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && (
+      {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            {roundedSelectedObject.type === "image" && (
+      {roundedSelectedObject.type === "image" && <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            {roundedSelectedObject.type === "link" && (
+      {roundedSelectedObject.type === "link" && <LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            {roundedSelectedObject.type === "video" && (
+      {roundedSelectedObject.type === "video" && <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            {roundedSelectedObject.type === "audio" && (
+      {roundedSelectedObject.type === "audio" && <AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
       {(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
         <SizeSettings
@@ -117,14 +90,9 @@ const ObjectSettings = ({
         />
       )}
 
-            {roundedSelectedObject.type === "grid" && (
+      {roundedSelectedObject.type === "grid" && <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
-                <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-            )}
 
-            <EntranceAnimationSettings
+      <EntranceAnimationSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
-                selectedObject={roundedSelectedObject}
-                onUpdate={handleRoundedUpdate}
-            />
 
       <TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
     </div>
@@ -132,4 +100,3 @@ const ObjectSettings = ({
 };
 
 export default ObjectSettings;
-

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

@@ -82,7 +82,7 @@ const AlignmentSettings = ({
   // const hint = alignToSelection ? "نسبت به دو شی انتخاب‌شده" : "نسبت به صفحه";
 
   return (
-    <div className="space-y-3 border-t border-border pt-4">
+    <div className="space-y-3">
       <div>
         <h4 className="text-sm font-bold text-foreground">ابزار جابه‌جایی</h4>
         {/* <p className="mt-1 text-xs text-muted-foreground">{hint}</p> */}