56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import type { Page } from '@/types/nostr'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface ArticlePagesProps {
|
|
pages: Page[]
|
|
}
|
|
|
|
export function ArticlePages({ pages }: ArticlePagesProps): React.ReactElement | null {
|
|
if (!pages || pages.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 mt-6">
|
|
<h3 className="text-xl font-semibold text-neon-cyan">{t('article.pages.title')}</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{pages.map((page) => (
|
|
<PageDisplay key={page.number} page={page} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function PageDisplay({ page }: { page: Page }): React.ReactElement {
|
|
return (
|
|
<div className="border border-neon-cyan/30 rounded-lg p-4 bg-cyber-dark">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h4 className="font-semibold text-neon-cyan">
|
|
{t('page.number', { number: page.number })}
|
|
</h4>
|
|
<span className="text-xs text-cyber-accent/70">{t(`page.type.${page.type}`)}</span>
|
|
</div>
|
|
{page.type === 'markdown' ? (
|
|
<div className="prose prose-invert max-w-none text-cyber-accent whitespace-pre-wrap">
|
|
{page.content || <span className="text-cyber-accent/50">{t('page.markdown.empty')}</span>}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{page.content ? (
|
|
<img
|
|
src={page.content}
|
|
alt={t('page.image.alt', { number: page.number })}
|
|
className="max-w-full h-auto rounded border border-neon-cyan/20"
|
|
/>
|
|
) : (
|
|
<div className="text-center py-8 text-cyber-accent/50 border border-dashed border-neon-cyan/20 rounded">
|
|
{t('page.image.empty')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|