93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { serializePageBlocks } from "@cms/content"
|
|
import { Button } from "@cms/ui/button"
|
|
|
|
import { PageBlockEditor } from "./page-block-editor"
|
|
|
|
type CreatePageFormProps = {
|
|
action: (formData: FormData) => void | Promise<void>
|
|
}
|
|
|
|
export function CreatePageForm({ action }: CreatePageFormProps) {
|
|
return (
|
|
<form action={action} className="mt-4 space-y-3">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="space-y-1 md:col-span-2">
|
|
<span className="text-xs text-neutral-600">Title</span>
|
|
<input
|
|
name="title"
|
|
required
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Status</span>
|
|
<select
|
|
name="status"
|
|
defaultValue="draft"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
<option value="draft">draft</option>
|
|
<option value="published">published</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Slug</span>
|
|
<input
|
|
name="slug"
|
|
required
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Summary</span>
|
|
<input
|
|
name="summary"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<PageBlockEditor
|
|
name="content"
|
|
initialContent={serializePageBlocks([
|
|
{
|
|
id: "initial-rich-text",
|
|
type: "rich_text",
|
|
body: "",
|
|
},
|
|
])}
|
|
/>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">SEO title</span>
|
|
<input
|
|
name="seoTitle"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">SEO description</span>
|
|
<input
|
|
name="seoDescription"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Scheduled publish (optional)</span>
|
|
<input
|
|
name="scheduledPublishAt"
|
|
type="datetime-local"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<Button type="submit">Create page</Button>
|
|
</form>
|
|
)
|
|
}
|