@morphika/andami 0.5.0 → 0.5.2

package/components/builder/settings-panel/CoverSectionLayoutTab.tsx

@@ -1,71 +1,71 @@
-"use client";
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { CoverSection } from "../../../lib/sanity/types";
-import {
-  SpacingIcon,
-  OffsetIcon,
-  BorderIcon,
-} from "../editors/section-icons";
-import { SettingsField, SettingsSection } from "../editors/shared";
-import { TRBLInputs } from "./TRBLInputs";
-
-interface CoverSectionLayoutTabProps {
-  section: CoverSection;
-}
-
-export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTabProps) {
-  const store = useBuilderStore();
-  const s = section.settings;
-
-  const update = (fields: Record<string, string | undefined>) => {
-    store.updateCoverSettings(section._key, fields as Partial<typeof s>);
-  };
-
-  return (
-    <>
-      {/* Spacing (padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
-        <TRBLInputs
-          top={s.spacing_top || ""}
-          right={s.spacing_right || ""}
-          bottom={s.spacing_bottom || ""}
-          left={s.spacing_left || ""}
-          onChange={(field, value) => update({ [`spacing_${field}`]: value || undefined })}
-        />
-      </SettingsSection>
-
-      {/* Offset (margin) */}
-      <SettingsSection title="Offset" defaultOpen={false} icon={<OffsetIcon />}>
-        <TRBLInputs
-          top={s.offset_top || ""}
-          right={s.offset_right || ""}
-          bottom={s.offset_bottom || ""}
-          left={s.offset_left || ""}
-          onChange={(field, value) => update({ [`offset_${field}`]: value || undefined })}
-        />
-      </SettingsSection>
-
-      {/* Border Radius */}
-      <SettingsSection title="Border" defaultOpen={false} icon={<BorderIcon />}>
-        <SettingsField label="Radius">
-          <div className="flex items-center gap-2">
-            <input
-              type="range"
-              min={0}
-              max={50}
-              step={1}
-              value={parseInt(s.border_radius || "0", 10) || 0}
-              onMouseDown={() => store._pushSnapshot()}
-              onChange={(e) => update({ border_radius: e.target.value === "0" ? undefined : e.target.value })}
-              className="flex-1 accent-[#076bff]"
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
-              {parseInt(s.border_radius || "0", 10) || 0}px
-            </span>
-          </div>
-        </SettingsField>
-      </SettingsSection>
-    </>
-  );
-}
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { CoverSection } from "../../../lib/sanity/types";
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BorderIcon,
+} from "../editors/section-icons";
+import { SettingsField, SettingsSection } from "../editors/shared";
+import { TRBLInputs } from "./TRBLInputs";
+
+interface CoverSectionLayoutTabProps {
+  section: CoverSection;
+}
+
+export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTabProps) {
+  const store = useBuilderStore();
+  const s = section.settings;
+
+  const update = (fields: Record<string, string | undefined>) => {
+    store.updateCoverSettings(section._key, fields as Partial<typeof s>);
+  };
+
+  return (
+    <>
+      {/* Spacing (padding) */}
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
+        <TRBLInputs
+          top={s.spacing_top || ""}
+          right={s.spacing_right || ""}
+          bottom={s.spacing_bottom || ""}
+          left={s.spacing_left || ""}
+          onChange={(field, value) => update({ [`spacing_${field}`]: value || undefined })}
+        />
+      </SettingsSection>
+
+      {/* Offset (margin) */}
+      <SettingsSection title="Offset" defaultOpen={false} icon={<OffsetIcon />}>
+        <TRBLInputs
+          top={s.offset_top || ""}
+          right={s.offset_right || ""}
+          bottom={s.offset_bottom || ""}
+          left={s.offset_left || ""}
+          onChange={(field, value) => update({ [`offset_${field}`]: value || undefined })}
+        />
+      </SettingsSection>
+
+      {/* Border Radius */}
+      <SettingsSection title="Border" defaultOpen={false} icon={<BorderIcon />}>
+        <SettingsField label="Radius">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={50}
+              step={1}
+              value={parseInt(s.border_radius || "0", 10) || 0}
+              onMouseDown={() => store._pushSnapshot()}
+              onChange={(e) => update({ border_radius: e.target.value === "0" ? undefined : e.target.value })}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {parseInt(s.border_radius || "0", 10) || 0}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}