88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import type { Article } from '@/types/nostr'
|
|
import { Button } from './ui'
|
|
import { ArticlePages } from './ArticlePages'
|
|
import { ReadingMode } from './ReadingMode'
|
|
import { ShareButtons } from './ShareButtons'
|
|
import { ArticleSuggestions } from './ArticleSuggestions'
|
|
import { findSimilarArticles, findAuthorArticles } from '@/lib/articleSuggestions'
|
|
|
|
interface ArticlePreviewProps {
|
|
article: Article
|
|
loading: boolean
|
|
onUnlock: () => void
|
|
allArticles?: Article[]
|
|
unlockedArticles?: Set<string>
|
|
}
|
|
|
|
function PaidArticleContent({
|
|
article,
|
|
onUnlock,
|
|
allArticles,
|
|
unlockedArticles,
|
|
}: {
|
|
article: Article
|
|
onUnlock: () => void
|
|
allArticles: Article[]
|
|
unlockedArticles: Set<string>
|
|
}): React.ReactElement {
|
|
const similarArticles = findSimilarArticles(article, allArticles)
|
|
const authorArticles = findAuthorArticles(article, allArticles)
|
|
|
|
return (
|
|
<ReadingMode>
|
|
<div>
|
|
<p className="mb-2 text-cyber-accent">{article.preview}</p>
|
|
<p className="text-sm text-cyber-accent/80 mt-4 whitespace-pre-wrap">{article.content}</p>
|
|
{article.pages && article.pages.length > 0 && <ArticlePages pages={article.pages} articleId={article.id} />}
|
|
<div className="mt-6 pt-4 border-t border-neon-cyan/30">
|
|
<ShareButtons articleId={article.id} articleTitle={article.title} authorPubkey={article.pubkey} />
|
|
</div>
|
|
<ArticleSuggestions
|
|
similarArticles={similarArticles}
|
|
authorArticles={authorArticles}
|
|
onUnlock={onUnlock}
|
|
unlockedArticles={unlockedArticles}
|
|
/>
|
|
</div>
|
|
</ReadingMode>
|
|
)
|
|
}
|
|
|
|
export function ArticlePreview({
|
|
article,
|
|
loading,
|
|
onUnlock,
|
|
allArticles = [],
|
|
unlockedArticles = new Set(),
|
|
}: ArticlePreviewProps): React.ReactElement {
|
|
if (article.paid) {
|
|
return (
|
|
<PaidArticleContent
|
|
article={article}
|
|
onUnlock={onUnlock}
|
|
allArticles={allArticles}
|
|
unlockedArticles={unlockedArticles}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<p className="mb-4 text-cyber-accent">{article.preview}</p>
|
|
<div className="border-t border-neon-cyan/30 pt-4">
|
|
<p className="text-sm text-cyber-accent/70 mb-4">
|
|
Contenu complet disponible après un zap de {article.zapAmount} sats
|
|
</p>
|
|
<Button
|
|
variant="success"
|
|
onClick={onUnlock}
|
|
disabled={loading}
|
|
loading={loading}
|
|
>
|
|
{loading ? 'Traitement...' : `Débloquer avec ${article.zapAmount} sats zap`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|