File size: 1,298 Bytes
fe54350 0879a03 c9869b0 e17b178 c9869b0 0879a03 a316956 0879a03 a316956 0879a03 a316956 0879a03 a316956 0879a03 e17b178 0879a03 22e848c 0879a03 22e848c 0879a03 22e848c 0879a03 e17b178 0879a03 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 'use server';
import Image from 'next/image';
import apiClient from '@/api/apiClient';
import SkeletonLoader from '@/skeletons/Card/movieCard';
import Link from 'next/link';
import './Card.css';
const TvShowCard = async ({ title }) => {
// Fetch movie data directly in the server component
let movieData;
let error = null;
try {
movieData = await apiClient.getSeriesCard(title);
} catch (err) {
error = err.message;
}
// If loading or movieData is not available, show skeleton loader
if (!movieData) {
return <SkeletonLoader />;
}
// Handle error state
if (error) {
return <div className="error">Error: {error}</div>;
}
return (
<Link href={`/tvshow/${title}`}>
<div className="movie-card">
<div className="movie-card-image-container">
<Image
src={movieData.image}
alt={`${movieData.title} poster`}
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
priority
className="movie-card-poster"
/>
</div>
<div className="movie-card-info">
<h3 className="movie-card-title">{movieData.title}</h3>
<p className="movie-card-year">{movieData.year}</p>
</div>
</div>
</Link>
);
};
export default TvShowCard;
|