Mathis/memegoat
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Activity

feat(content-card): improve UI and add tooltips for interaction elements

Browse Source 
- Introduced tooltips for like, views, and share buttons for better user guidance.
- Added support for category display and improved tag styling.
- Adjusted `CardContent` aspect ratios for better responsiveness.
- Enhanced share button functionality with copy-to-clipboard feedback.
This commit is contained in:
Mathis HERRIOT
2026-01-21 15:42:35 +01:00
parent 96a9d6e7a7
commit 73556894f8
1 changed files with 77 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/components/content-card.tsx
View File

@@ -21,6 +21,12 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useAuth } from "@/providers/auth-provider";
import { ContentService } from "@/services/content.service";
import { FavoriteService } from "@/services/favorite.service";
@@ -88,7 +94,12 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
try {
await ContentService.remove(content.id);
toast.success("Mème supprimé !");
onUpdate?.();
if (onUpdate) {
onUpdate();
} else {
// Si pas de onUpdate, on est probablement sur la page de détail
router.push("/");
}
} catch (_error) {
toast.error("Erreur lors de la suppression.");
}
@@ -147,7 +158,7 @@ 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">
<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square sm:aspect-video md:aspect-square flex items-center justify-center">
<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
{content.mimeType.startsWith("image/") ? (
<Image
@@ -156,6 +167,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
fill
className="object-contain"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
priority={false}
/>
) : (
<video
@@ -164,6 +176,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
autoPlay
muted
loop
playsInline
className="w-full h-full object-contain"
/>
)}
@@ -172,27 +185,60 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
<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>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className={`gap-1.5 h-8 px-2 ${isLiked ? "text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20" : ""}`}
onClick={handleLike}
>
<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
<span className="text-xs font-medium">{likesCount}</span>
</Button>
</TooltipTrigger>
<TooltipContent>Liker</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="gap-1.5 h-8 px-2 cursor-default"
>
<Eye className="h-4 w-4 text-muted-foreground" />
<span className="text-xs font-medium">{content.views}</span>
</Button>
</TooltipTrigger>
<TooltipContent>Vues</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
onClick={() => {
navigator.clipboard.writeText(
`${window.location.origin}/meme/${content.slug}`,
);
toast.success("Lien copié !");
}}
>
<Share2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Partager</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<Button
size="sm"
variant="secondary"
className="text-xs h-8"
className="text-xs h-8 font-semibold"
onClick={handleUse}
>
Utiliser
@@ -200,13 +246,22 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
</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">
<Link href={`/meme/${content.slug}`}>
<h3 className="font-semibold text-base line-clamp-2 hover:text-primary transition-colors">
{content.title}
</h3>
</Link>
<div className="flex flex-wrap gap-1.5">
{content.category && (
<Badge variant="outline" className="text-[10px] py-0 px-2 bg-muted/50">
{content.category.name}
</Badge>
)}
{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"
className="text-[10px] py-0 px-2"
>
#{typeof tag === "string" ? tag : tag.name}
</Badge>