65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { CreateSeriesModal } from '@/components/CreateSeriesModal'
|
|
import { SeriesCard } from '@/components/SeriesCard'
|
|
import { Button, Card, EmptyState } from '@/components/ui'
|
|
import { useNostrAuth } from '@/hooks/useNostrAuth'
|
|
import { t } from '@/lib/i18n'
|
|
import type { Series } from '@/types/nostr'
|
|
|
|
export function SeriesList(params: { series: Series[]; authorPubkey: string; onSeriesCreated: () => void }): React.ReactElement {
|
|
const { pubkey, isUnlocked } = useNostrAuth()
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|
const isAuthor = pubkey === params.authorPubkey && isUnlocked
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<SeriesListHeader isAuthor={isAuthor} onCreate={() => setShowCreateModal(true)} />
|
|
<SeriesGrid series={params.series} />
|
|
<CreateSeriesModal
|
|
isOpen={showCreateModal}
|
|
onClose={() => setShowCreateModal(false)}
|
|
onSuccess={params.onSeriesCreated}
|
|
authorPubkey={params.authorPubkey}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SeriesListHeader(params: { isAuthor: boolean; onCreate: () => void }): React.ReactElement {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-semibold text-neon-cyan">{t('series.title')}</h2>
|
|
{params.isAuthor && (
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
onClick={params.onCreate}
|
|
>
|
|
{t('series.create.button')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SeriesGrid(params: { series: Series[] }): React.ReactElement {
|
|
if (params.series.length === 0) {
|
|
return (
|
|
<Card variant="default" className="bg-cyber-dark/50">
|
|
<EmptyState title={t('series.empty')} />
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{params.series.map((s) => (
|
|
<Link key={s.id} href={`/series/${s.id}`}>
|
|
<SeriesCard series={s} onSelect={() => {}} />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|