From 058830bb60dd79d4a844d116c10cac8c94c8c1c4 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 13:48:29 +0100
Subject: [PATCH] refactor(content-card): fix indentation and improve
 readability

- Fixed inconsistent indentation in `content-card` component.
- Enhanced code readability by restructuring JSX elements properly.
---
 frontend/src/components/content-card.tsx | 148 ++++++++++++-----------
 1 file changed, 75 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/content-card.tsx b/frontend/src/components/content-card.tsx
index a64a2e6..cac2a3b 100644
--- a/frontend/src/components/content-card.tsx
+++ b/frontend/src/components/content-card.tsx
@@ -100,7 +100,9 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 				<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
 					<Avatar className="h-8 w-8">
 						<AvatarImage src={content.author.avatarUrl} />
-						<AvatarFallback>{content.author.username[0].toUpperCase()}</AvatarFallback>
+						<AvatarFallback>
+							{content.author.username[0].toUpperCase()}
+						</AvatarFallback>
 					</Avatar>
 					<div className="flex flex-col">
 						<Link
@@ -145,80 +147,80 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-			<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">
-					{content.mimeType.startsWith("image/") ? (
-						<Image
-							src={content.url}
-							alt={content.title}
-							fill
-							className="object-contain"
-							sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-						/>
-					) : (
-						<video
-							src={content.url}
-							controls={false}
-							autoPlay
-							muted
-							loop
-							className="w-full h-full object-contain"
-						/>
-					)}
-				</Link>
-			</CardContent>
-			<CardFooter className="p-4 flex flex-col gap-4">
-				<div className="w-full flex items-center justify-between">
-					<div className="flex items-center gap-2">
-						<Button
-							variant="ghost"
-							size="sm"
-							className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
-							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"
+				<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">
+						{content.mimeType.startsWith("image/") ? (
+							<Image
+								src={content.url}
+								alt={content.title}
+								fill
+								className="object-contain"
+								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+							/>
+						) : (
+							<video
+								src={content.url}
+								controls={false}
+								autoPlay
+								muted
+								loop
+								className="w-full h-full object-contain"
+							/>
+						)}
+					</Link>
+				</CardContent>
+				<CardFooter className="p-4 flex flex-col gap-4">
+					<div className="w-full flex items-center justify-between">
+						<div className="flex items-center gap-2">
+							<Button
+								variant="ghost"
+								size="sm"
+								className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
+								onClick={handleLike}
 							>
-								#{typeof tag === "string" ? tag : tag.name}
-							</Badge>
-						))}
+								<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>
-			</CardFooter>
-		</Card>
-		<UserContentEditDialog
-			content={content}
-			open={editDialogOpen}
-			onOpenChange={setEditDialogOpen}
-			onSuccess={() => onUpdate?.()}
-		/>
+
+					<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}
+								</Badge>
+							))}
+						</div>
+					</div>
+				</CardFooter>
+			</Card>
+			<UserContentEditDialog
+				content={content}
+				open={editDialogOpen}
+				onOpenChange={setEditDialogOpen}
+				onSuccess={() => onUpdate?.()}
+			/>
 		</>
 	);
 }