naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify entry animations and eliminate layout flicker on overview, syllabus tracker, and doubt forum

Browse Source
This commit is contained in:
ectasy663
2026-10-23 17:42:34 +05:30
parent 5c9126ed7a
commit f9e0fb752b
7 changed files with 401 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/app/dashboard/community/page.tsx
View File

@@ -84,39 +84,46 @@ export default function CommunityPage() {
return true
})
if (loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading Doubt Forum...</p>
</div>
)
}
if (!hasAccessTo("doubt-resolution-community")) {
if (!hasAccessTo("doubt-resolution-community") && !isDemo) {
return (
<div className="p-8 h-full flex flex-col items-center justify-center text-center max-w-2xl mx-auto">
<div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500 mb-6">
<Lock size={40} />
<div className="p-8 space-y-8 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
<MessageSquare className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Doubt Forum
</h1>
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Ask questions, share knowledge, and learn together with the community.
</p>
</div>
</div>
<div className="p-12 text-center max-w-2xl mx-auto bg-secondary/20 border border-border rounded-3xl space-y-6 animate-section animate-section-2">
<div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500">
<Lock size={40} />
</div>
<h2 className="text-2xl font-bold">Premium Feature</h2>
<p className="text-muted-foreground">
The Doubt Forum is a premium feature. Upgrade your plan to ask doubts and interact with tutors and the community.
</p>
<button
className="px-8 py-3 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_20px_-5px_var(--cyan-ai)]"
onClick={() => window.location.href = '/upgrade'}
>
Upgrade Plan
</button>
</div>
<h2 className="text-3xl font-bold mb-4">Premium Feature</h2>
<p className="text-muted-foreground text-lg mb-8">
The Doubt Forum is a premium feature. Upgrade your plan to ask doubts and interact with tutors and the community.
</p>
<button
className="px-8 py-3 bg-primary text-primary-foreground font-bold rounded-xl shadow-[0_0_20px_-5px_var(--color-primary)] text-lg"
onClick={() => window.location.href = '/upgrade'}
>
Upgrade Plan
</button>
</div>
)
}
return (
<PremiumGate featureKey="doubt-resolution-community">
<div className="p-8 space-y-6 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
<div className="p-8 space-y-8 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
@@ -159,7 +166,9 @@ export default function CommunityPage() {
</div>
<div className="space-y-4 animate-section animate-section-3">
{filteredDoubts.map((doubt) => (
{loading ? (
<div className="text-center py-12 text-muted-foreground animate-pulse">Loading doubts...</div>
) : (<>{filteredDoubts.map((doubt) => (
<Card key={doubt.id} className="border-border shadow-sm hover:border-[var(--cyan-ai-10)] transition-colors cursor-pointer">
<CardContent className="p-0 flex">
{/* Upvote Sidebar */}
@@ -259,6 +268,7 @@ export default function CommunityPage() {
</p>
</div>
)}
</>)}
</div>
{/* Ask Doubt Modal */}
{isAskModalOpen && (
@@ -331,7 +341,7 @@ export default function CommunityPage() {
</div>
)}
</div>
</PremiumGate>
)
}