julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remplacement du button par un div pour les cartes médias

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-12 21:40:21 +01:00
parent ddeed31488
commit 7bd6892cfd
2 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/home/HeroSection.tsx
View File

@@ -51,14 +51,19 @@ function CoverImage({ series }: CoverImageProps) {
return ( return (
<div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden"> <div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden">
{!imageError ? ( {!imageError ? (
<Image <div className="absolute inset-0">
src={`/api/komga/images/series/${series.id}/thumbnail`} <Image
alt={`Couverture de ${series.metadata.title}`} src={`/api/komga/images/series/${series.id}/thumbnail`}
fill alt={`Couverture de ${series.metadata.title}`}
className="object-cover" width={200}
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw" height={300}
onError={() => setImageError(true)} className="w-full h-full object-cover"
/> sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
priority={true}
loading="eager"
onError={() => setImageError(true)}
/>
</div>
) : ( ) : (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
<ImageOff className="w-8 h-8" /> <ImageOff className="w-8 h-8" />

27
src/components/home/MediaRow.tsx
View File

@@ -99,21 +99,26 @@ function MediaCard({ item, onClick }: MediaCardProps) {
}; };
return ( return (
<button <div
onClick={handleClick} onClick={handleClick}
className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden" className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
> >
{/* Image de couverture */} {/* Image de couverture */}
<div className="relative aspect-[2/3] bg-muted"> <div className="relative aspect-[2/3] bg-muted">
{!imageError ? ( {!imageError ? (
<Image <div className="absolute inset-0">
src={`/api/komga/images/${isSeries ? "series" : "books"}/${item.id}/thumbnail`} <Image
alt={`Couverture de ${title}`} src={`/api/komga/images/${isSeries ? "series" : "books"}/${item.id}/thumbnail`}
fill alt={`Couverture de ${title}`}
className="object-cover" width={200}
sizes="200px" height={300}
onError={() => setImageError(true)} className="w-full h-full object-cover"
/> sizes="200px"
priority={true}
loading="eager"
onError={() => setImageError(true)}
/>
</div>
) : ( ) : (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
<ImageOff className="w-12 h-12" /> <ImageOff className="w-12 h-12" />
@@ -130,6 +135,6 @@ function MediaCard({ item, onClick }: MediaCardProps) {
)} )}
</div> </div>
</div> </div>
</button> </div>
); );
} }