55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import { BaseEntryEditor } from './BaseEntryEditor';
|
|
|
|
const CreateForm = ({ formData, setFormData }) => (
|
|
<>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">Content</label>
|
|
<textarea
|
|
value={formData.content || ''}
|
|
onChange={e => setFormData({...formData, content: e.target.value})}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.read || false}
|
|
onChange={e => setFormData({...formData, read: e.target.checked})}
|
|
className="rounded border-gray-300"
|
|
/>
|
|
<span className="ml-2 text-sm text-gray-700">Read</span>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
const EditForm = CreateForm;
|
|
|
|
const ViewMode = ({ formData }) => (
|
|
<>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-700">Content:</span>
|
|
<pre className="mt-1 text-sm text-gray-900 bg-gray-50 p-2 rounded">{formData.content || ''}</pre>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-gray-700">
|
|
{formData.read ? '✓ Read' : '✗ Not Read'}
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
export const ReadEntryEditor = (props) => (
|
|
<BaseEntryEditor {...props}>
|
|
{({ formData, setFormData, isEditing, isNew }) => {
|
|
if (isNew) {
|
|
return <CreateForm formData={formData} setFormData={setFormData} />;
|
|
}
|
|
if (isEditing) {
|
|
return <EditForm formData={formData} setFormData={setFormData} />;
|
|
}
|
|
return <ViewMode formData={formData} />;
|
|
}}
|
|
</BaseEntryEditor>
|
|
);
|