78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { BaseEntry } from './BaseEntry';
|
|
import { IOEntryData } from '../../../types/entries';
|
|
|
|
interface ReadEntryProps {
|
|
entry: IOEntryData;
|
|
onDelete: (id: string) => void;
|
|
onUpdate: (id: string) => void;
|
|
onReset: (id: string) => void;
|
|
onSave: (id: string, data: IOEntryData) => Promise<void>;
|
|
}
|
|
|
|
const ReadEntry: React.FC<ReadEntryProps> = ({
|
|
entry,
|
|
onDelete,
|
|
onUpdate,
|
|
onReset,
|
|
onSave
|
|
}) => {
|
|
const renderContent = (data: IOEntryData) => (
|
|
<div className="space-y-3">
|
|
<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 whitespace-pre-wrap">{data.content || ''}</pre>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-gray-700">
|
|
{data.read ? '✓ Read' : '✗ Not Read'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderEditForm = (
|
|
data: IOEntryData,
|
|
onChange: (data: IOEntryData) => void,
|
|
isLoading: boolean
|
|
) => (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Content</label>
|
|
<textarea
|
|
value={data.content || ''}
|
|
onChange={e => onChange({ ...data, content: e.target.value })}
|
|
className="w-full p-2 border rounded font-mono text-sm resize-vertical"
|
|
rows={4}
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={data.read || false}
|
|
onChange={e => onChange({ ...data, read: e.target.checked })}
|
|
className="rounded border-gray-300"
|
|
disabled={isLoading}
|
|
/>
|
|
<span className="ml-2 text-sm text-gray-700">Read</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<BaseEntry
|
|
entry={entry}
|
|
onDelete={onDelete}
|
|
onUpdate={onUpdate}
|
|
onReset={onReset}
|
|
onSave={onSave}
|
|
renderContent={renderContent}
|
|
renderEditForm={renderEditForm}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ReadEntry; |