45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import VideoCard from "../components/video/VideoCard";
|
|
import {useEffect, useState} from "react";
|
|
import { getClips } from "../utils/endpoints";
|
|
import type { Clip } from "../utils/types";
|
|
|
|
const MyClips = () => {
|
|
const [clips, setClips] = useState<Clip[]>([]);
|
|
const [error, setError] = useState<null | string>(null);
|
|
|
|
useEffect(() => {
|
|
getClips()
|
|
.then((data) => setClips(data))
|
|
.catch((err) => setError(err));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<h1 className="text-2xl font-semibold text-gray-900 mb-6">My Clips</h1>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{clips.map((clip) => (
|
|
<VideoCard
|
|
key={clip.id}
|
|
id={clip.id}
|
|
title={clip.title}
|
|
duration={clip.duration}
|
|
createdAt={clip.createdAt}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{clips.length === 0 && !error && (
|
|
<div className="flex flex-col items-center justify-center py-16 text-gray-400">
|
|
<p className="text-base">No clips yet.</p>
|
|
<p className="text-sm mt-1">Upload your first clip to get started.</p>
|
|
</div>
|
|
)}
|
|
|
|
{error && <p className="text-sm text-red-500 mt-4">{error.toString()}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MyClips;
|