71 lines
2.7 KiB
JavaScript
71 lines
2.7 KiB
JavaScript
import './ArticleDetail.css';
|
|
|
|
function ArticleDetail({ article, onBack, onEdit, onDelete, currentUser }) {
|
|
if (!article) {
|
|
return <div>No article selected</div>
|
|
}
|
|
|
|
const canEdit = currentUser?.role === 'Admin' || currentUser?.role === 'Editor';
|
|
|
|
return (
|
|
<div className='article-detail'>
|
|
<div className='btn-group' style={{ marginBottom: 'var(--spacing-xl)' }}>
|
|
<button className='btn btn-ghost' onClick={onBack}>
|
|
← Back
|
|
</button>
|
|
{canEdit && (
|
|
<>
|
|
<button className='btn btn-primary' onClick={onEdit}>
|
|
Edit
|
|
</button>
|
|
<button className='btn btn-danger' onClick={onDelete}>
|
|
Delete
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className='article-header'>
|
|
<span className='ka-number-badge'>{article.ka_number}</span>
|
|
<h1>{article.title}</h1>
|
|
<p className='article-meta'>
|
|
Created: {new Date(article.created_at).toLocaleDateString()}
|
|
{article.updated_at && ` | Updated: ${new Date(article.updated_at).toLocaleDateString()}`}
|
|
</p>
|
|
|
|
{article.categories && article.categories.length > 0 && (
|
|
<div className='article-metadata'>
|
|
<div className='metadata-label'>Categories:</div>
|
|
<div className='badge-group'>
|
|
{article.categories.map(category => (
|
|
<span key={category} className='badge category-badge'>
|
|
{category}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{article.tags && article.tags.length > 0 && (
|
|
<div className='article-metadata'>
|
|
<div className='metadata-label'>Tags:</div>
|
|
<div className='badge-group'>
|
|
{article.tags.map(tag => (
|
|
<span key={tag} className='badge tag-badge'>
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className='article-content'
|
|
dangerouslySetInnerHTML={{ __html: article.content }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ArticleDetail; |