1827dd6c4e
Self-hosted personal YouTube management app. FastAPI + SQLite backend, React + Vite + Tailwind frontend. Dockerfiles and compose included for Portainer deployment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
867 B
JavaScript
30 lines
867 B
JavaScript
import VideoCard from "./VideoCard";
|
|
|
|
export default function Shelf({ title, videos, action, emptyText }) {
|
|
if (!videos?.length && emptyText) {
|
|
return (
|
|
<section>
|
|
<h2 className="font-display font-semibold text-lg text-zinc-300 mb-3">{title}</h2>
|
|
<p className="text-sm text-zinc-600">{emptyText}</p>
|
|
</section>
|
|
);
|
|
}
|
|
if (!videos?.length) return null;
|
|
|
|
return (
|
|
<section>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="font-display font-semibold text-lg text-zinc-300">{title}</h2>
|
|
{action}
|
|
</div>
|
|
<div className="flex gap-4 overflow-x-auto pb-2 -mx-1 px-1">
|
|
{videos.map((v) => (
|
|
<div key={v.youtube_video_id || v.id} className="w-64 shrink-0">
|
|
<VideoCard video={v} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|