50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import type { Article } from '@/types/nostr'
|
|
import { useNostrConnect } from '@/hooks/useNostrConnect'
|
|
import { useArticlePayment } from '@/hooks/useArticlePayment'
|
|
import { ArticlePreview } from './ArticlePreview'
|
|
import { PaymentModal } from './PaymentModal'
|
|
|
|
interface ArticleCardProps {
|
|
article: Article
|
|
onUnlock?: (article: Article) => void
|
|
}
|
|
|
|
export function ArticleCard({ article, onUnlock }: ArticleCardProps) {
|
|
const { connected, pubkey } = useNostrConnect()
|
|
const {
|
|
loading,
|
|
error,
|
|
paymentInvoice,
|
|
handleUnlock,
|
|
handlePaymentComplete,
|
|
handleCloseModal,
|
|
} = useArticlePayment(article, pubkey ?? null, () => {
|
|
onUnlock?.(article)
|
|
})
|
|
|
|
return (
|
|
<article className="border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
|
|
<h2 className="text-2xl font-bold mb-2">{article.title}</h2>
|
|
<div className="text-gray-600 mb-4">
|
|
<ArticlePreview
|
|
article={article}
|
|
connected={connected}
|
|
loading={loading}
|
|
onUnlock={handleUnlockClick}
|
|
/>
|
|
</div>
|
|
{error && <p className="text-sm text-red-600 mt-2">{error}</p>}
|
|
<div className="text-xs text-gray-400 mt-4">
|
|
Published {new Date(article.createdAt * 1000).toLocaleDateString()}
|
|
</div>
|
|
{paymentInvoice && (
|
|
<PaymentModal
|
|
invoice={paymentInvoice}
|
|
onClose={handleCloseModal}
|
|
onPaymentComplete={handlePaymentComplete}
|
|
/>
|
|
)}
|
|
</article>
|
|
)
|
|
}
|