@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/blocks/ButtonBlock.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, ExternalLink } from "lucide-react";
+
+interface ButtonBlockProps {
+  block: any;
+  index: number;
+}
+
+export const ButtonBlock: React.FC<ButtonBlockProps> = ({ block, index }) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+  const data = blockData?.data ?? block.data ?? {};
+
+  const handleChange = (field: string, value: any) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  return (
+    <div className="block-button border border-[var(--kyro-border)] rounded-md p-4 mb-4 relative group">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Button
+          </span>
+        </div>
+        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-[-90deg]" />
+          </button>
+          <button type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Button Text
+          </label>
+          <input
+            type="text"
+            value={block.data.text || ""}
+            onChange={(e) => handleChange("text", e.target.value)}
+            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
+            placeholder="Click here..."
+          />
+        </div>
+
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            URL
+          </label>
+          <input
+            type="url"
+            value={block.data.url || ""}
+            onChange={(e) => handleChange("url", e.target.value)}
+            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
+            placeholder="https://..."
+          />
+        </div>
+
+        <div className="grid grid-cols-3 gap-3">
+          <div>
+            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+              Style
+            </label>
+            <select
+              value={block.data.variant || "primary"}
+              onChange={(e) => handleChange("variant", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
+            >
+              <option value="primary">Primary</option>
+              <option value="secondary">Secondary</option>
+              <option value="outline">Outline</option>
+              <option value="ghost">Ghost</option>
+            </select>
+          </div>
+          <div>
+            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+              Size
+            </label>
+            <select
+              value={block.data.size || "md"}
+              onChange={(e) => handleChange("size", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
+            >
+              <option value="sm">Small</option>
+              <option value="md">Medium</option>
+              <option value="lg">Large</option>
+            </select>
+          </div>
+          <div>
+            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+              Target
+            </label>
+            <select
+              value={block.data.target || "_self"}
+              onChange={(e) => handleChange("target", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
+            >
+              <option value="_self">Same Tab</option>
+              <option value="_blank">New Tab</option>
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Alignment
+          </label>
+          <select
+            value={block.data.align || "left"}
+            onChange={(e) => handleChange("align", e.target.value)}
+            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
+          >
+            <option value="left">Left</option>
+            <option value="center">Center</option>
+            <option value="right">Right</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div className="mt-4 p-4 bg-[var(--kyro-surface)] rounded border border-[var(--kyro-border)]">
+        <p className="text-xs text-[var(--kyro-text-muted)] mb-2">Preview:</p>
+        <button type="button"
+          className={`px-4 py-2 rounded font-medium text-sm
+            ${block.data.variant === "primary" ? "bg-[var(--kyro-primary)] text-white" : ""}
+            ${block.data.variant === "secondary" ? "bg-[var(--kyro-secondary)] text-white" : ""}
+            ${block.data.variant === "outline" ? "border border-[var(--kyro-primary)] text-[var(--kyro-primary)] bg-transparent" : ""}
+            ${block.data.variant === "ghost" ? "text-[var(--kyro-primary)] bg-transparent" : ""}
+            ${block.data.size === "sm" ? "text-xs px-3 py-1" : ""}
+            ${block.data.size === "md" ? "text-sm px-4 py-2" : ""}
+            ${block.data.size === "lg" ? "text-base px-5 py-3" : ""}
+          `}
+        >
+          {block.data.text || "Button"}
+          {block.data.target === "_blank" && (
+            <ExternalLink className="w-3 h-3 ml-2 inline" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};