55 lines
2.2 KiB
JavaScript
55 lines
2.2 KiB
JavaScript
import React from 'react'
|
|
import LevelBadge from '../../xp/LevelBadge'
|
|
|
|
export default function TabStories({ stories, username }) {
|
|
const list = Array.isArray(stories) ? stories : []
|
|
|
|
if (!list.length) {
|
|
return (
|
|
<div className="rounded-xl border border-white/10 bg-white/[0.02] px-6 py-12 text-center text-slate-300">
|
|
No stories published yet.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{list.map((story) => (
|
|
<a
|
|
key={story.id}
|
|
href={`/stories/${story.slug}`}
|
|
className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition duration-200 hover:scale-[1.01] hover:border-sky-500/40"
|
|
>
|
|
{story.cover_url ? (
|
|
<img src={story.cover_url} alt={story.title} className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105" />
|
|
) : (
|
|
<div className="h-44 w-full bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950" />
|
|
)}
|
|
<div className="space-y-2 p-4">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<LevelBadge level={story.creator_level} rank={story.creator_rank} compact />
|
|
<span className="text-[11px] uppercase tracking-[0.16em] text-gray-500">Story</span>
|
|
</div>
|
|
<h3 className="line-clamp-2 text-base font-semibold text-white">{story.title}</h3>
|
|
<p className="line-clamp-2 text-xs text-gray-300">{story.excerpt || ''}</p>
|
|
<div className="flex items-center gap-3 text-xs text-gray-400">
|
|
<span>{story.reading_time || 1} min read</span>
|
|
<span>{story.views || 0} views</span>
|
|
<span>{story.likes_count || 0} likes</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<a
|
|
href={`/stories/creator/${username}`}
|
|
className="inline-flex rounded-lg border border-sky-400/30 bg-sky-500/10 px-3 py-2 text-sm text-sky-300 transition hover:scale-[1.01] hover:text-sky-200"
|
|
>
|
|
View all stories
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|