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

feat(profile): add "Share Profile" button and improve page responsiveness

Browse Source 
- Added "Share Profile" button with clipboard copy and success notification.
- Enhanced responsiveness by adjusting avatar sizes, typography, and spacing.
- Refined button styling for consistency and usability.
This commit is contained in:
Mathis HERRIOT
2026-01-21 15:43:48 +01:00
parent e69156407e
commit 6bc6a8f68c
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/app/(dashboard)/user/[username]/page.tsx
View File

@@ -1,9 +1,11 @@
"use client";
import { Calendar, User as UserIcon } from "lucide-react";
import { Calendar, Share2, User as UserIcon } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";
import { ContentList } from "@/components/content-list";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { ContentService } from "@/services/content.service";
import { UserService } from "@/services/user.service";
@@ -31,6 +33,12 @@ export default function PublicProfilePage({
[username],
);
const handleShareProfile = () => {
const url = `${window.location.origin}/user/${username}`;
navigator.clipboard.writeText(url);
toast.success("Lien du profil copié !");
};
if (loading) {
return (
<div className="flex h-[400px] items-center justify-center">
@@ -55,28 +63,28 @@ export default function PublicProfilePage({
return (
<div className="max-w-4xl mx-auto py-8 px-4">
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-8 border shadow-sm mb-8">
<div className="flex flex-col md:flex-row items-center gap-8">
<Avatar className="h-32 w-32 border-4 border-primary/10">
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 md:p-8 border shadow-sm mb-8">
<div className="flex flex-col md:flex-row items-center md:items-start gap-6 md:gap-8">
<Avatar className="h-24 w-24 md:h-32 md:w-32 border-4 border-primary/10">
<AvatarImage src={user.avatarUrl} alt={user.username} />
<AvatarFallback className="text-4xl">
<AvatarFallback className="text-3xl md:text-4xl">
{user.username.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<div className="flex-1 text-center md:text-left space-y-4">
<div>
<h1 className="text-3xl font-bold">
<div className="space-y-1">
<h1 className="text-2xl md:text-3xl font-bold tracking-tight">
{user.displayName || user.username}
</h1>
<p className="text-muted-foreground">@{user.username}</p>
<p className="text-muted-foreground font-medium">@{user.username}</p>
</div>
{user.bio && (
<p className="max-w-md text-sm leading-relaxed mx-auto md:mx-0">
<p className="max-w-md text-sm md:text-base leading-relaxed mx-auto md:mx-0 text-balance">
{user.bio}
</p>
)}
<div className="flex flex-wrap justify-center md:justify-start gap-4 text-sm text-muted-foreground">
<span className="flex items-center gap-1">
<span className="flex items-center gap-1.5">
<Calendar className="h-4 w-4" />
Membre depuis{" "}
{new Date(user.createdAt).toLocaleDateString("fr-FR", {
@@ -85,12 +93,23 @@ export default function PublicProfilePage({
})}
</span>
</div>
<div className="flex justify-center md:justify-start pt-2">
<Button
variant="outline"
size="sm"
className="h-9 px-4"
onClick={handleShareProfile}
>
<Share2 className="h-4 w-4 mr-2" />
Partager le profil
</Button>
</div>
</div>
</div>
</div>
<div className="space-y-8">
<h2 className="text-xl font-bold border-b pb-4">Ses mèmes</h2>
<h2 className="text-xl md:text-2xl font-bold border-b pb-4">Ses mèmes</h2>
<ContentList fetchFn={fetchUserMemes} />
</div>
</div>