You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.9 KiB
52 lines
1.9 KiB
import { useNavigate } from 'react-router-dom';
|
|
|
|
// SUPPORTED JSON FORMAT
|
|
// [
|
|
// {
|
|
// "id": 1,
|
|
// "title": "Video minecraft",
|
|
// "thumbnail": "/api/media/thumbnail/78438E11ABA5D0C8.webp",
|
|
// "video_description": "Cest une super video minecraft",
|
|
// "channel": 1,
|
|
// "visibility": "public",
|
|
// "file": "/api/media/video/78438E11ABA5D0C8.mp4",
|
|
// "slug": "78438E11ABA5D0C8",
|
|
// "format": "mp4",
|
|
// "release_date": "2025-08-11T11:14:01.357Z",
|
|
// "channel_id": 1,
|
|
// "owner": 2,
|
|
// "views": "2",
|
|
// "creator": {
|
|
// "name": "astria",
|
|
// "profilePicture": "/api/media/profile/sacha.jpg",
|
|
// "description": "salut tout le monde"
|
|
// },
|
|
// "type": "video"
|
|
// }
|
|
// ]
|
|
|
|
export default function VideoCard({ video }) {
|
|
const navigation = useNavigate();
|
|
const handleClick = () => {
|
|
navigation(`/video/${video.id}`, {
|
|
state: { video }
|
|
})
|
|
}
|
|
return (
|
|
<div className="flex flex-col glassmorphism w-full p-6 cursor-pointer" onClick={handleClick} >
|
|
<div className="aspect-video rounded-sm overflow-hidden">
|
|
<img
|
|
src={video.thumbnail}
|
|
alt={video.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<h2 className="text-2xl font-medium font-inter mt-3 text-white">{video.title}</h2>
|
|
<div className="text-sm text-gray-400 mt-1 flex items-center">
|
|
<img src={video.creator.profilePicture} alt={video.title} className="w-12 aspect-square rounded-full object-cover" />
|
|
<span className="ml-2">{video.creator.name}</span>
|
|
<span className="ml-3.5">{video.views} vues</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|