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

feat(profile): add profile sharing feature and enhance UI responsiveness

Browse Source 
- Implemented the "Share Profile" button with clipboard copy functionality and success notification.
- Improved profile page responsiveness by adjusting avatar, text sizes, and spacing.
- Added consistent button styling and updated tabs for better usability and design.
This commit is contained in:
Mathis HERRIOT
2026-01-21 15:43:34 +01:00
parent 029bbe9bb9
commit 7dce7ec286
1 changed files with 48 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/app/(dashboard)/profile/page.tsx
View File

@@ -1,6 +1,13 @@
"use client";
import { Calendar, Camera, LogIn, LogOut, Settings } from "lucide-react";
import {
Calendar,
Camera,
LogIn,
LogOut,
Settings,
Share2,
} from "lucide-react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import * as React from "react";
@@ -59,6 +66,12 @@ export default function ProfilePage() {
[],
);
const handleShareProfile = () => {
const url = `${window.location.origin}/user/${user?.username}`;
navigator.clipboard.writeText(url);
toast.success("Lien du profil copié !");
};
if (isLoading) {
return (
<div className="flex h-[400px] items-center justify-center">
@@ -93,12 +106,12 @@ export default function ProfilePage() {
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">
<div className="relative group">
<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">
<div className="relative group shrink-0">
<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>
@@ -106,8 +119,9 @@ export default function ProfilePage() {
type="button"
onClick={handleAvatarClick}
className="absolute inset-0 flex items-center justify-center bg-black/40 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
title="Changer l'avatar"
>
<Camera className="h-8 w-8" />
<Camera className="h-6 w-6 md:h-8 md:w-8" />
</button>
<input
type="file"
@@ -118,17 +132,21 @@ export default function ProfilePage() {
/>
</div>
<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">{user.bio}</p>
<p className="max-w-md text-sm md:text-base leading-relaxed 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", {
@@ -137,18 +155,28 @@ export default function ProfilePage() {
})}
</span>
</div>
<div className="flex flex-wrap justify-center md:justify-start gap-2">
<Button asChild variant="outline" size="sm">
<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
<Button asChild variant="outline" size="sm" className="h-9 px-4">
<Link href="/settings">
<Settings className="h-4 w-4 mr-2" />
Paramètres
</Link>
</Button>
<Button
variant="outline"
size="sm"
className="h-9 px-4"
onClick={handleShareProfile}
>
<Share2 className="h-4 w-4 mr-2" />
Partager
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => logout()}
className="text-red-500 hover:text-red-600 hover:bg-red-50"
className="h-9 px-4 text-destructive hover:text-destructive hover:bg-destructive/10"
>
<LogOut className="h-4 w-4 mr-2" />
Déconnexion
@@ -159,18 +187,18 @@ export default function ProfilePage() {
</div>
<Tabs value={tab} className="w-full">
<TabsList className="grid w-full grid-cols-2 mb-8">
<TabsTrigger value="memes" asChild>
<TabsList className="grid w-full grid-cols-2 mb-8 h-11">
<TabsTrigger value="memes" asChild className="text-sm font-semibold">
<Link href="/profile?tab=memes">Mes Mèmes</Link>
</TabsTrigger>
<TabsTrigger value="favorites" asChild>
<TabsTrigger value="favorites" asChild className="text-sm font-semibold">
<Link href="/profile?tab=favorites">Mes Favoris</Link>
</TabsTrigger>
</TabsList>
<TabsContent value="memes">
<TabsContent value="memes" className="mt-0 outline-none">
<ContentList fetchFn={fetchMyMemes} />
</TabsContent>
<TabsContent value="favorites">
<TabsContent value="favorites" className="mt-0 outline-none">
<ContentList fetchFn={fetchMyFavorites} />
</TabsContent>
</Tabs>