feat(pages): complete reusable page block editor controls
This commit is contained in:
@@ -43,6 +43,25 @@ function updateBlock(blocks: PageBlocks, blockId: string, next: Partial<PageBloc
|
||||
)
|
||||
}
|
||||
|
||||
function moveBlock(blocks: PageBlocks, blockId: string, direction: "up" | "down"): PageBlocks {
|
||||
const index = blocks.findIndex((entry) => entry.id === blockId)
|
||||
|
||||
if (index < 0) {
|
||||
return blocks
|
||||
}
|
||||
|
||||
const nextIndex = direction === "up" ? index - 1 : index + 1
|
||||
if (nextIndex < 0 || nextIndex >= blocks.length) {
|
||||
return blocks
|
||||
}
|
||||
|
||||
const next = [...blocks]
|
||||
const current = next[index]
|
||||
next[index] = next[nextIndex]
|
||||
next[nextIndex] = current
|
||||
return next
|
||||
}
|
||||
|
||||
export function PageBlockEditor({
|
||||
name,
|
||||
initialContent,
|
||||
@@ -156,13 +175,29 @@ export function PageBlockEditor({
|
||||
<span>
|
||||
#{index + 1} {block.type}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => prev.filter((entry) => entry.id !== block.id))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => moveBlock(prev, block.id, "up"))}
|
||||
>
|
||||
Up
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => moveBlock(prev, block.id, "down"))}
|
||||
>
|
||||
Down
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => prev.filter((entry) => entry.id !== block.id))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{block.type === "hero" ? (
|
||||
@@ -187,6 +222,26 @@ export function PageBlockEditor({
|
||||
placeholder="Subheading"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<input
|
||||
value={block.ctaLabel ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { ctaLabel: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="CTA label"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<input
|
||||
value={block.ctaHref ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { ctaHref: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="CTA href"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -203,22 +258,34 @@ export function PageBlockEditor({
|
||||
) : null}
|
||||
|
||||
{block.type === "gallery" ? (
|
||||
<textarea
|
||||
rows={3}
|
||||
value={block.imageIds.join(",")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
imageIds: event.target.value
|
||||
.split(",")
|
||||
.map((entry) => entry.trim())
|
||||
.filter((entry) => entry.length > 0),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="Media asset IDs (comma separated UUIDs)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
value={block.title ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { title: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Gallery title"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={block.imageIds.join(",")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
imageIds: event.target.value
|
||||
.split(",")
|
||||
.map((entry) => entry.trim())
|
||||
.filter((entry) => entry.length > 0),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="Media asset IDs (comma separated UUIDs)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{block.type === "cta" ? (
|
||||
@@ -239,50 +306,101 @@ export function PageBlockEditor({
|
||||
placeholder="Link href"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<select
|
||||
value={block.variant}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
variant: event.target.value as "primary" | "secondary",
|
||||
}),
|
||||
)
|
||||
}
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
>
|
||||
<option value="primary">Primary</option>
|
||||
<option value="secondary">Secondary</option>
|
||||
</select>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{block.type === "form" ? (
|
||||
<input
|
||||
value={block.formKey}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) => updateBlock(prev, block.id, { formKey: event.target.value }))
|
||||
}
|
||||
placeholder="Form key (e.g. contact, commission)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
value={block.formKey}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { formKey: event.target.value }),
|
||||
)
|
||||
}
|
||||
placeholder="Form key (e.g. contact, commission)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<input
|
||||
value={block.title ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { title: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Form title"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<textarea
|
||||
rows={2}
|
||||
value={block.description ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { description: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Form description"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{block.type === "price_cards" ? (
|
||||
<textarea
|
||||
rows={4}
|
||||
value={block.cards
|
||||
.map((card) => [card.name, card.price ?? "", card.description ?? ""].join("|"))
|
||||
.join("\n")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
cards: event.target.value
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0)
|
||||
.map((line, lineIndex) => {
|
||||
const [name, price, description] = line
|
||||
.split("|")
|
||||
.map((entry) => entry.trim())
|
||||
return {
|
||||
id: `card-${lineIndex}`,
|
||||
name: name || `Card ${lineIndex + 1}`,
|
||||
price: price || null,
|
||||
description: description || null,
|
||||
}
|
||||
}),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="One card per line: Name|Price|Description"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
value={block.title ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { title: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Price card section title"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={block.cards
|
||||
.map((card) => [card.name, card.price ?? "", card.description ?? ""].join("|"))
|
||||
.join("\n")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
cards: event.target.value
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0)
|
||||
.map((line, lineIndex) => {
|
||||
const [name, price, description] = line
|
||||
.split("|")
|
||||
.map((entry) => entry.trim())
|
||||
return {
|
||||
id: `card-${lineIndex}`,
|
||||
name: name || `Card ${lineIndex + 1}`,
|
||||
price: price || null,
|
||||
description: description || null,
|
||||
}
|
||||
}),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="One card per line: Name|Price|Description"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user