73 lines
3.6 KiB
TypeScript
73 lines
3.6 KiB
TypeScript
import { Database } from '@/types_db'
|
|
import Link from 'next/link'
|
|
import { Book, Clock, Download } from 'lucide-react'
|
|
|
|
type Deck = Database['public']['Tables']['decks']['Row']
|
|
|
|
export default function DeckList({ decks }: { decks: Deck[] }) {
|
|
if (decks.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 border border-dashed border-gray-800 rounded-lg bg-surface-dark/50">
|
|
<h3 className="mt-2 text-sm font-semibold text-gray-200">No decks found</h3>
|
|
<p className="mt-1 text-sm text-gray-400">Get started by creating a new deck.</p>
|
|
<div className="mt-6">
|
|
{/* Action to create deck could go here in future */}
|
|
<button className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-900 bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
|
Create Deck
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{decks.map((deck) => (
|
|
<div
|
|
key={deck.id}
|
|
className="relative group bg-surface-dark border border-gray-800 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 hover:shadow-glow"
|
|
>
|
|
<div className="h-32 bg-gray-900 relative">
|
|
{deck.cover_image_url ? (
|
|
<img
|
|
src={deck.cover_image_url}
|
|
alt={deck.title || 'Deck cover'}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center"
|
|
style={{ background: deck.gradient || undefined }}
|
|
>
|
|
<Book className="h-10 w-10 text-gray-600" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-5">
|
|
<h3 className="text-lg font-bold text-white mb-2 line-clamp-1">
|
|
{deck.title || 'Untitled Deck'}
|
|
</h3>
|
|
<p className="text-gray-400 text-sm mb-4 line-clamp-2 min-h-[40px]">
|
|
{deck.description || 'No description provided.'}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-800">
|
|
<div className="flex items-center gap-1">
|
|
<Download size={14} />
|
|
<span>{deck.downloads || 0}</span>
|
|
</div>
|
|
{deck.last_studied_at && (
|
|
<div className="flex items-center gap-1">
|
|
<Clock size={14} />
|
|
<span>{new Date(deck.last_studied_at).toLocaleDateString()}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|