refactor(content-card): fix indentation and improve readability
- Fixed inconsistent indentation in `content-card` component. - Enhanced code readability by restructuring JSX elements properly.
This commit is contained in:
Mathis HERRIOT
@@ -100,7 +100,9 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
|
|||||||
<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
|
<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
|
||||||
<Avatar className="h-8 w-8">
|
<Avatar className="h-8 w-8">
|
||||||
<AvatarImage src={content.author.avatarUrl} />
|
<AvatarImage src={content.author.avatarUrl} />
|
||||||
<AvatarFallback>{content.author.username[0].toUpperCase()}</AvatarFallback>
|
<AvatarFallback>
|
||||||
|
{content.author.username[0].toUpperCase()}
|
||||||
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<Link
|
<Link
|
||||||
@@ -145,80 +147,80 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
|
|||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
|
<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
|
||||||
<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
|
<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
|
||||||
{content.mimeType.startsWith("image/") ? (
|
{content.mimeType.startsWith("image/") ? (
|
||||||
<Image
|
<Image
|
||||||
src={content.url}
|
src={content.url}
|
||||||
alt={content.title}
|
alt={content.title}
|
||||||
fill
|
fill
|
||||||
className="object-contain"
|
className="object-contain"
|
||||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<video
|
<video
|
||||||
src={content.url}
|
src={content.url}
|
||||||
controls={false}
|
controls={false}
|
||||||
autoPlay
|
autoPlay
|
||||||
muted
|
muted
|
||||||
loop
|
loop
|
||||||
className="w-full h-full object-contain"
|
className="w-full h-full object-contain"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter className="p-4 flex flex-col gap-4">
|
<CardFooter className="p-4 flex flex-col gap-4">
|
||||||
<div className="w-full flex items-center justify-between">
|
<div className="w-full flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
|
className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
|
||||||
onClick={handleLike}
|
onClick={handleLike}
|
||||||
>
|
|
||||||
<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
|
|
||||||
<span className="text-xs">{likesCount}</span>
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="sm" className="gap-1.5 h-8">
|
|
||||||
<Eye className="h-4 w-4" />
|
|
||||||
<span className="text-xs">{content.views}</span>
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
|
||||||
<Share2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="secondary"
|
|
||||||
className="text-xs h-8"
|
|
||||||
onClick={handleUse}
|
|
||||||
>
|
|
||||||
Utiliser
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full space-y-2">
|
|
||||||
<h3 className="font-medium text-sm line-clamp-2">{content.title}</h3>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{content.tags.slice(0, 3).map((tag, _i) => (
|
|
||||||
<Badge
|
|
||||||
key={typeof tag === "string" ? tag : tag.id}
|
|
||||||
variant="secondary"
|
|
||||||
className="text-[10px] py-0 px-1.5"
|
|
||||||
>
|
>
|
||||||
#{typeof tag === "string" ? tag : tag.name}
|
<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
|
||||||
</Badge>
|
<span className="text-xs">{likesCount}</span>
|
||||||
))}
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" className="gap-1.5 h-8">
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
<span className="text-xs">{content.views}</span>
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||||
|
<Share2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="text-xs h-8"
|
||||||
|
onClick={handleUse}
|
||||||
|
>
|
||||||
|
Utiliser
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</CardFooter>
|
<div className="w-full space-y-2">
|
||||||
</Card>
|
<h3 className="font-medium text-sm line-clamp-2">{content.title}</h3>
|
||||||
<UserContentEditDialog
|
<div className="flex flex-wrap gap-1">
|
||||||
content={content}
|
{content.tags.slice(0, 3).map((tag, _i) => (
|
||||||
open={editDialogOpen}
|
<Badge
|
||||||
onOpenChange={setEditDialogOpen}
|
key={typeof tag === "string" ? tag : tag.id}
|
||||||
onSuccess={() => onUpdate?.()}
|
variant="secondary"
|
||||||
/>
|
className="text-[10px] py-0 px-1.5"
|
||||||
|
>
|
||||||
|
#{typeof tag === "string" ? tag : tag.name}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
<UserContentEditDialog
|
||||||
|
content={content}
|
||||||
|
open={editDialogOpen}
|
||||||
|
onOpenChange={setEditDialogOpen}
|
||||||
|
onSuccess={() => onUpdate?.()}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user