81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import type { ArticleDraft } from '@/lib/articlePublisher'
|
|
import { ArticleField } from './ArticleField'
|
|
import { ArticleFormButtons } from './ArticleFormButtons'
|
|
|
|
interface ArticleEditorFormProps {
|
|
draft: ArticleDraft
|
|
onDraftChange: (draft: ArticleDraft) => void
|
|
onSubmit: (e: React.FormEvent) => void
|
|
loading: boolean
|
|
error: string | null
|
|
onCancel?: () => void
|
|
}
|
|
|
|
export function ArticleEditorForm({
|
|
draft,
|
|
onDraftChange,
|
|
onSubmit,
|
|
loading,
|
|
error,
|
|
onCancel,
|
|
}: ArticleEditorFormProps) {
|
|
return (
|
|
<form onSubmit={onSubmit} className="border rounded-lg p-6 bg-white space-y-4">
|
|
<h2 className="text-2xl font-bold mb-4">Publish New Article</h2>
|
|
|
|
<ArticleField
|
|
id="title"
|
|
label="Title"
|
|
value={draft.title}
|
|
onChange={(value) => onDraftChange({ ...draft, title: value as string })}
|
|
required
|
|
placeholder="Enter article title"
|
|
/>
|
|
|
|
<ArticleField
|
|
id="preview"
|
|
label="Preview (Public)"
|
|
value={draft.preview}
|
|
onChange={(value) => onDraftChange({ ...draft, preview: value as string })}
|
|
required
|
|
type="textarea"
|
|
rows={4}
|
|
placeholder="This preview will be visible to everyone for free"
|
|
helpText="This content will be visible to everyone"
|
|
/>
|
|
|
|
<ArticleField
|
|
id="content"
|
|
label="Full Content (Private)"
|
|
value={draft.content}
|
|
onChange={(value) => onDraftChange({ ...draft, content: value as string })}
|
|
required
|
|
type="textarea"
|
|
rows={8}
|
|
placeholder="This content will be encrypted and sent to users who pay"
|
|
helpText="This content will be encrypted and sent as a private message after payment"
|
|
/>
|
|
|
|
<ArticleField
|
|
id="zapAmount"
|
|
label="Price (sats)"
|
|
value={draft.zapAmount}
|
|
onChange={(value) => onDraftChange({ ...draft, zapAmount: value as number })}
|
|
required
|
|
type="number"
|
|
min={1}
|
|
helpText="Amount in satoshis to unlock the full content"
|
|
/>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-3">
|
|
<p className="text-sm text-red-800">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
<ArticleFormButtons loading={loading} onCancel={onCancel} />
|
|
</form>
|
|
)
|
|
}
|