88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import { Modal } from './ui'
|
|
import type { ArticleDraft } from '@/lib/articlePublisher'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface ArticlePreviewModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
draft: ArticleDraft
|
|
}
|
|
|
|
export function ArticlePreviewModal({ isOpen, onClose, draft }: ArticlePreviewModalProps): React.ReactElement {
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={t('article.preview.title')}
|
|
size="large"
|
|
>
|
|
<ArticlePreviewContent draft={draft} />
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
function ArticlePreviewContent({ draft }: { draft: ArticleDraft }): React.ReactElement {
|
|
return (
|
|
<div className="space-y-6">
|
|
<ArticlePreviewHeader draft={draft} />
|
|
<ArticlePreviewBody draft={draft} />
|
|
<ArticlePreviewMeta draft={draft} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ArticlePreviewHeader({ draft }: { draft: ArticleDraft }): React.ReactElement {
|
|
return (
|
|
<div className="border-b border-neon-cyan/30 pb-4">
|
|
<h2 className="text-2xl font-bold text-neon-cyan mb-2">{draft.title || t('article.preview.noTitle')}</h2>
|
|
{draft.category && (
|
|
<span className="text-sm text-cyber-accent/70">
|
|
{t(`category.${draft.category}`)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ArticlePreviewBody({ draft }: { draft: ArticleDraft }): React.ReactElement {
|
|
return (
|
|
<div className="space-y-4">
|
|
{draft.preview && (
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-neon-cyan mb-2">{t('article.preview.previewLabel')}</h3>
|
|
<p className="text-cyber-accent whitespace-pre-wrap">{draft.preview}</p>
|
|
</div>
|
|
)}
|
|
{draft.content && (
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-neon-cyan mb-2">{t('article.preview.contentLabel')}</h3>
|
|
<p className="text-sm text-cyber-accent/80 whitespace-pre-wrap">{draft.content}</p>
|
|
</div>
|
|
)}
|
|
{(!draft.preview && !draft.content) && (
|
|
<p className="text-cyber-accent/50 italic">{t('article.preview.empty')}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ArticlePreviewMeta({ draft }: { draft: ArticleDraft }): React.ReactElement {
|
|
return (
|
|
<div className="border-t border-neon-cyan/30 pt-4 text-xs text-cyber-accent/70 space-y-2">
|
|
<div>
|
|
<span className="font-semibold">{t('article.preview.zapAmount')}:</span> {draft.zapAmount} sats
|
|
</div>
|
|
{draft.seriesId && (
|
|
<div>
|
|
<span className="font-semibold">{t('article.preview.series')}:</span> {draft.seriesId}
|
|
</div>
|
|
)}
|
|
{draft.media && draft.media.length > 0 && (
|
|
<div>
|
|
<span className="font-semibold">{t('article.preview.media')}:</span> {draft.media.length} {t('article.preview.mediaItems')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|