change design alignmentsetting

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

@@ -1,4 +1,4 @@
-
+import type { ReactNode } from "react";
 import {
   AlignBottom,
   AlignHorizontally,
@@ -23,20 +23,40 @@ type AlignmentSettingsProps = {
   onUpdate: (id: string, updates: Partial<EditorObject>) => void;
 };
 
+type AlignButtonGroupProps = {
+  children: ReactNode;
+};
 
+type AlignButtonProps = {
+  title: string;
+  onClick: () => void;
+  children: ReactNode;
+};
 
-const alignIconProps = { size: 24, color: "currentColor" as const, variant: "Linear" as const };
+const AlignButtonGroup = ({ children }: AlignButtonGroupProps) => (
+  <div className="flex flex-1 overflow-hidden rounded-lg border border-[#E5E5E5] bg-[#F2F2F2] divide-x divide-[#E5E5E5]">
+    {children}
+  </div>
+);
+
+const AlignButton = ({ title, onClick, children }: AlignButtonProps) => (
+  <button
+    type="button"
+    title={title}
+    onClick={onClick}
+    className="flex flex-1 items-center justify-center py-2.5 text-[#333333] transition-colors hover:bg-black/4 active:bg-black/8"
+  >
+    {children}
+  </button>
+);
+
+const alignIconProps = { size: 20, color: "currentColor" as const, variant: "Linear" as const };
 
 const AlignmentSettings = ({
   pageWidth,
   pageHeight,
   onUpdate,
 }: AlignmentSettingsProps) => {
-  // const selectedObjectIds = useEditorStore((s) => s.selectedObjectIds);
-
-  /** دقیقاً دو شیٔ مجزا (هنوز یک گروه نشده‌اند) → مرز همان دو شی؛ یک شی یا گروه یا بیش از دو تا → صفحه */
-  // const alignToSelection = selectedObjectIds.length === 2;
-
   const applyAlign = (kind: AlignKind) => {
     useEditorStore.getState().commitObjectHistoryBeforeChange();
     const { objects: objs, selectedObjectIds: ids, layerRef } = useEditorStore.getState();
@@ -79,38 +99,37 @@ const AlignmentSettings = ({
     }
   };
 
-  // const hint = alignToSelection ? "نسبت به دو شی انتخاب‌شده" : "نسبت به صفحه";
-
   return (
     <div className="space-y-3">
-      <div>
+      <h4 className="text-[13px] text-[#7A7A7A]">ترازبندی</h4>
-        <h4 className="text-sm font-bold text-foreground">ابزار جابه‌جایی</h4>
-        {/* <p className="mt-1 text-xs text-muted-foreground">{hint}</p> */}
-      </div>
 
-      <div className="space-y-2">
+      <div className="flex gap-2">
-        <p className="text-xs font-medium text-muted-foreground">افقی</p>
+        <AlignButtonGroup>
-        <div className="flex gap-12 items-center mt-4">
+          <AlignButton title="تراز راست" onClick={() => applyAlign("right")}>
-          <AlignRight onClick={() => applyAlign("right")} {...alignIconProps} />
+            <AlignRight {...alignIconProps} />
-          <AlignHorizontally onClick={() => applyAlign("centerH")} {...alignIconProps} />
+          </AlignButton>
-          <AlignLeft onClick={() => applyAlign("left")} {...alignIconProps} />
+          <AlignButton title="تراز افقی وسط" onClick={() => applyAlign("centerH")}>
-        </div>
+            <AlignHorizontally {...alignIconProps} />
-      </div>
+          </AlignButton>
+          <AlignButton title="تراز چپ" onClick={() => applyAlign("left")}>
+            <AlignLeft {...alignIconProps} />
+          </AlignButton>
+        </AlignButtonGroup>
 
-      <div className="space-y-2">
+        <AlignButtonGroup>
-        <p className="text-xs font-medium text-muted-foreground mt-4">عمودی</p>
+          <AlignButton title="تراز بالا" onClick={() => applyAlign("top")}>
-        <div className="flex gap-12 items-center mt-4">
+            <AlignTop {...alignIconProps} />
-
+          </AlignButton>
-          <AlignTop onClick={() => applyAlign("top")} {...alignIconProps} />
+          <AlignButton title="تراز عمودی وسط" onClick={() => applyAlign("centerV")}>
-
+            <AlignVertically {...alignIconProps} />
-          <AlignVertically onClick={() => applyAlign("centerV")} {...alignIconProps} />
+          </AlignButton>
-
+          <AlignButton title="تراز پایین" onClick={() => applyAlign("bottom")}>
-          <AlignBottom onClick={() => applyAlign("bottom")} {...alignIconProps} />
+            <AlignBottom {...alignIconProps} />
-
+          </AlignButton>
-        </div>
+        </AlignButtonGroup>
       </div>
     </div>
   );
 };
 
-export default AlignmentSettings;
+export default AlignmentSettings;