import { useState } from 'react' import Head from 'next/head' import { ConnectButton } from '@/components/ConnectButton' import { ArticleCard } from '@/components/ArticleCard' import { SearchBar } from '@/components/SearchBar' import { ArticleFiltersComponent, type ArticleFilters } from '@/components/ArticleFilters' import { useArticles } from '@/hooks/useArticles' import type { Article } from '@/types/nostr' export default function Home() { const [searchQuery, setSearchQuery] = useState('') const [filters, setFilters] = useState({ authorPubkey: null, minPrice: null, maxPrice: null, sortBy: 'newest', }) const { articles, allArticles, loading, error, loadArticleContent } = useArticles( searchQuery, filters ) const [unlockedArticles, setUnlockedArticles] = useState>(new Set()) const handleUnlock = async (article: Article) => { const fullArticle = await loadArticleContent(article.id, article.pubkey) if (fullArticle && fullArticle.paid) { setUnlockedArticles((prev) => new Set([...prev, article.id])) } } return ( <> Nostr Paywall - Articles with Lightning Payments

Nostr Paywall

Articles

Read previews for free, unlock full content with {800} sats Lightning zaps

{/* Search Bar */}
{/* Filters */} {!loading && allArticles.length > 0 && ( )} {loading && (

Loading articles...

)} {error && (

{error}

)} {!loading && articles.length === 0 && (

{allArticles.length === 0 ? 'No articles found. Check back later!' : 'No articles match your search or filters.'}

)} {!loading && articles.length > 0 && (
Showing {articles.length} of {allArticles.length} article{allArticles.length !== 1 ? 's' : ''}
)}
{articles.map((article) => ( ))}
) }