GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(profile): improve styling of profile page
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-11 22:24:15 +03:30
parent ed14ea9488
commit 5a9d36efa9
1 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/Profile.tsx
View File

@@ -63,11 +63,11 @@ function SectionTitle({
}) {
return (
<div className="text-right">
<div className="flex items-center justify-end gap-2">
<CardTitle>{title}</CardTitle>
<div className="flex items-center gap-2">
<div className="rounded-2xl border border-border/70 bg-muted/35 p-3">
<Icon className="h-5 w-5 text-primary" />
</div>
<CardTitle>{title}</CardTitle>
</div>
{description ? <CardDescription className="mt-2">{description}</CardDescription> : null}
</div>
@@ -98,10 +98,10 @@ function TabButton<T extends string>({
: "border-border/70 bg-background/70 text-muted-foreground hover:bg-muted/50 hover:text-foreground",
].join(" ")}
>
<span className="font-medium">{label}</span>
<span className="rounded-full bg-background/25 px-2 py-0.5 text-xs">
{formatNumberPersian(count)}
</span>
<span className="font-medium">{label}</span>
</button>
);
}
@@ -553,7 +553,6 @@ export default function Profile() {
<SectionTitle
icon={UserRound}
title="اطلاعات شخصی و حساب"
description="اطلاعات اصلی حساب بدون فیلدهای اضافی و با چینش مناسب فارسی."
/>
</CardHeader>
<CardContent className="grid gap-6 md:grid-cols-2">
@@ -589,7 +588,6 @@ export default function Profile() {
<SectionTitle
icon={CalendarClock}
title="فعالیت‌های رویدادی"
description="ثبت‌نام‌های شما با تفکیک وضعیت در نمای تب‌بندی‌شده."
/>
</CardHeader>
<CardContent className="space-y-5">
@@ -624,20 +622,20 @@ export default function Profile() {
</div>
<div className="flex flex-col gap-4 lg:flex-row-reverse">
<div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
<TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
<TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
<TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
</div>
<div className="min-w-0 flex-1 space-y-3">
{regsLoading ? <p className="text-sm text-muted-foreground">در حال بارگذاری فعالیت‌های رویدادی...</p> : null}
{regsError ? <p className="text-sm text-destructive">خطا در دریافت ثبت‌نام‌های رویدادی</p> : null}
{activeEventItems.length ? activeEventItems.map(renderRegistrationRow) : (
<div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
<div className="rounded-2xl flex flex-col justify-center h-full border border-dashed p-8 text-center text-sm text-muted-foreground">
موردی در این بخش ثبت نشده است.
</div>
)}
</div>
<div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
<TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
<TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
<TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
</div>
</div>
</CardContent>
</Card>
@@ -647,17 +645,10 @@ export default function Profile() {
<SectionTitle
icon={MessageSquareText}
title="فعالیت‌های بلاگ"
description="لایک‌ها، ذخیره‌ها، نظرها و پاسخ‌های شما در نمای تب‌بندی‌شده."
/>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4 lg:flex-row-reverse">
<div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
<TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
<TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
<TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
<TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
</div>
<div className="min-w-0 flex-1 space-y-3">
{blogTab === "liked" ? (
blogActivity?.liked_posts.length ? blogActivity.liked_posts.map(renderPostRow) : (
@@ -680,6 +671,12 @@ export default function Profile() {
)
) : null}
</div>
<div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
<TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
<TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
<TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
<TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
</div>
</div>
</CardContent>
</Card>
@@ -699,7 +696,7 @@ function EmptyBlogActivity({
text: string;
}) {
return (
<div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
<div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground flex flex-col justify-center h-full">
<Icon className="mx-auto mb-3 h-5 w-5 text-primary" />
{text}
</div>