86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import type { Article } from '@/types/nostr'
|
|
import { ArticleCard } from './ArticleCard'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface ArticleSuggestionsProps {
|
|
similarArticles: Article[]
|
|
authorArticles: Article[]
|
|
onUnlock: (article: Article) => void
|
|
unlockedArticles: Set<string>
|
|
}
|
|
|
|
export function ArticleSuggestions({
|
|
similarArticles,
|
|
authorArticles,
|
|
onUnlock,
|
|
unlockedArticles,
|
|
}: ArticleSuggestionsProps): React.ReactElement | null {
|
|
const hasSimilar = similarArticles.length > 0
|
|
const hasAuthor = authorArticles.length > 0
|
|
|
|
if (!hasSimilar && !hasAuthor) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="mt-8 space-y-6">
|
|
{hasSimilar && (
|
|
<SimilarArticlesSection articles={similarArticles} onUnlock={onUnlock} unlockedArticles={unlockedArticles} />
|
|
)}
|
|
{hasAuthor && (
|
|
<AuthorArticlesSection articles={authorArticles} onUnlock={onUnlock} unlockedArticles={unlockedArticles} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SimilarArticlesSection({
|
|
articles,
|
|
onUnlock,
|
|
unlockedArticles,
|
|
}: {
|
|
articles: Article[]
|
|
onUnlock: (article: Article) => void
|
|
unlockedArticles: Set<string>
|
|
}): React.ReactElement {
|
|
return (
|
|
<section aria-label={t('suggestions.similarArticles')}>
|
|
<h3 className="text-xl font-semibold text-neon-cyan mb-4">{t('suggestions.similarArticles')}</h3>
|
|
<div className="space-y-4">
|
|
{articles.slice(0, 3).map((article) => (
|
|
<ArticleCard
|
|
key={article.id}
|
|
article={{ ...article, paid: unlockedArticles.has(article.id) || article.paid }}
|
|
onUnlock={onUnlock}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function AuthorArticlesSection({
|
|
articles,
|
|
onUnlock,
|
|
unlockedArticles,
|
|
}: {
|
|
articles: Article[]
|
|
onUnlock: (article: Article) => void
|
|
unlockedArticles: Set<string>
|
|
}): React.ReactElement {
|
|
return (
|
|
<section aria-label={t('suggestions.authorArticles')}>
|
|
<h3 className="text-xl font-semibold text-neon-cyan mb-4">{t('suggestions.authorArticles')}</h3>
|
|
<div className="space-y-4">
|
|
{articles.slice(0, 3).map((article) => (
|
|
<ArticleCard
|
|
key={article.id}
|
|
article={{ ...article, paid: unlockedArticles.has(article.id) || article.paid }}
|
|
onUnlock={onUnlock}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|