44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import type { Article } from '@/types/nostr'
|
|
|
|
interface ArticlePreviewProps {
|
|
article: Article
|
|
connected: boolean
|
|
loading: boolean
|
|
onUnlock: () => void
|
|
}
|
|
|
|
export function ArticlePreview({ article, connected, loading, onUnlock }: ArticlePreviewProps) {
|
|
if (article.paid) {
|
|
return (
|
|
<div>
|
|
<p className="mb-2">{article.preview}</p>
|
|
<p className="text-sm text-gray-500 mt-4 whitespace-pre-wrap">{article.content}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<p className="mb-4">{article.preview}</p>
|
|
<div className="border-t pt-4">
|
|
<p className="text-sm text-gray-500 mb-4">
|
|
Full content available after {article.zapAmount} sats zap
|
|
</p>
|
|
{connected ? (
|
|
<button
|
|
onClick={onUnlock}
|
|
disabled={loading}
|
|
className="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
|
|
>
|
|
{loading ? 'Processing...' : `Unlock for ${article.zapAmount} sats`}
|
|
</button>
|
|
) : (
|
|
<p className="text-sm text-blue-600">Connect with Nostr to unlock this article</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|