diff --git a/app/(dashboard)/community/page.tsx b/app/(dashboard)/community/page.tsx index ad162b1..f940058 100644 --- a/app/(dashboard)/community/page.tsx +++ b/app/(dashboard)/community/page.tsx @@ -1,42 +1,313 @@ import React from 'react'; +import CategoryBadge from '@/components/CategoryBadge'; +import CommunityHeroBanner from '@/components/community/CommunityHeroBanner'; -export default function CommunityPage() { +// ── Mock data ──────────────────────────────────────────────────────────────── + +const TABS = ['All Discussions', 'Questions', 'Success Stories', 'Resources', 'Events']; + +const DISCUSSIONS = [ + { + id: 1, + author: 'Amara Osei', + avatar: null, + role: 'Mentee', + time: '2 hours ago', + category: 'Question', + categoryColor: 'bg-blue-100 text-blue-700', + title: 'How do I transition from frontend to full-stack development?', + excerpt: + "I've been working as a frontend developer for 2 years and want to expand into backend. What resources or learning paths do you recommend?", + likes: 24, + replies: 12, + }, + { + id: 2, + author: 'Kwame Mensah', + avatar: null, + role: 'Mentor', + time: '5 hours ago', + category: 'Success Story', + categoryColor: 'bg-green-100 text-green-700', + title: 'Landed my first senior engineering role after 6 months of mentorship!', + excerpt: + 'I wanted to share my journey. Six months ago I was stuck at mid-level. After consistent mentorship sessions and deliberate practice, I just accepted a senior offer at a fintech company.', + likes: 89, + replies: 31, + }, + { + id: 3, + author: 'Fatima Al-Hassan', + avatar: null, + role: 'Mentee', + time: '1 day ago', + category: 'Resource', + categoryColor: 'bg-purple-100 text-purple-700', + title: 'Curated list of system design resources for interviews', + excerpt: + 'I compiled everything I used to prep for system design interviews at FAANG companies. Includes books, YouTube channels, and mock interview tips.', + likes: 56, + replies: 8, + }, + { + id: 4, + author: 'David Nkrumah', + avatar: null, + role: 'Mentor', + time: '2 days ago', + category: 'Question', + categoryColor: 'bg-blue-100 text-blue-700', + title: 'Best practices for code reviews as a senior developer?', + excerpt: + "I've recently moved into a senior role and want to make sure my code reviews are helpful rather than demoralizing. How do you balance thoroughness with empathy?", + likes: 41, + replies: 19, + }, +]; + +const CATEGORIES = [ + { label: 'Career Advice', count: 142, color: 'bg-cyan-100 text-cyan-700' }, + { label: 'Technical Skills', count: 98, color: 'bg-purple-100 text-purple-700' }, + { label: 'Interview Prep', count: 74, color: 'bg-amber-100 text-amber-700' }, + { label: 'Success Stories', count: 63, color: 'bg-green-100 text-green-700' }, + { label: 'Resources', count: 51, color: 'bg-blue-100 text-blue-700' }, + { label: 'Networking', count: 38, color: 'bg-rose-100 text-rose-700' }, +]; + +const EVENTS = [ + { + id: 1, + title: 'AMA: Breaking into Product Management', + date: 'Jul 5, 2026', + time: '3:00 PM WAT', + attendees: 47, + }, + { + id: 2, + title: 'Workshop: Negotiating Your Salary', + date: 'Jul 12, 2026', + time: '5:00 PM WAT', + attendees: 112, + }, + { + id: 3, + title: 'Panel: Women in Tech Leadership', + date: 'Jul 19, 2026', + time: '4:00 PM WAT', + attendees: 89, + }, +]; + +const STATS = [ + { label: 'Community Members', value: '12,480', icon: '👥' }, + { label: 'Discussions Started', value: '3,214', icon: '💬' }, + { label: 'Questions Answered', value: '8,901', icon: '✅' }, + { label: 'Events Hosted', value: '256', icon: '📅' }, +]; + +// ── Helpers ────────────────────────────────────────────────────────────────── + +function getInitials(name: string) { + return name + .split(' ') + .map((n) => n[0]) + .join('') + .toUpperCase() + .slice(0, 2); +} + +const AVATAR_GRADIENTS = [ + 'from-purple-500 to-indigo-600', + 'from-cyan-500 to-blue-600', + 'from-emerald-500 to-teal-600', + 'from-pink-500 to-rose-600', +]; + +function avatarGradient(name: string) { + return AVATAR_GRADIENTS[name.length % AVATAR_GRADIENTS.length]; +} + +// ── Sub-components ──────────────────────────────────────────────────────────── + +function DiscussionCard({ post }: { post: (typeof DISCUSSIONS)[number] }) { return ( -
-
-

Community

-

- Connect with mentors and mentees — ask questions, share experiences, and join community events. -

-
+
+
+ {/* Avatar */} + + +
+ {/* Author + meta */} +
+ {post.author} + · + {post.role} + · + {post.time} + +
+ + {/* Title */} +

+ {post.title} +

+ + {/* Excerpt */} +

{post.excerpt}

-
- {/* Discussions placeholder */} -
-

Discussions

-
-

Discussions will appear here once the feature is available.

+ {/* Actions */} +
+ +
+
+
+ ); +} + +// ── Page ────────────────────────────────────────────────────────────────────── - {/* Sidebar placeholders */} -
- {/* Events */} -
-

Upcoming Events

-
-

No upcoming events yet.

-
+export default function CommunityPage() { + return ( +
+ {/* ── Hero Banner ──────────────────────────────────────────────────── */} + + + {/* ── Main content + sidebar ────────────────────────────────────────── */} +
+ {/* ── Left: Discussion feed ─────────────────────────────────────── */} +
+ {/* Tabs */} + + + {/* Discussion list */} +
+ {DISCUSSIONS.map((post) => ( + + ))}
- {/* Active members */} -
-

Active Members

-
-

Member activity coming soon.

-
+ {/* Load more */} +
+
+ + {/* ── Right: Sidebar ────────────────────────────────────────────── */} +
); diff --git a/components/community/CommunityHeroBanner.tsx b/components/community/CommunityHeroBanner.tsx new file mode 100644 index 0000000..27095a3 --- /dev/null +++ b/components/community/CommunityHeroBanner.tsx @@ -0,0 +1,37 @@ +interface CommunityHeroBannerProps { + onStartDiscussion?: () => void; +} + +export default function CommunityHeroBanner({ onStartDiscussion }: CommunityHeroBannerProps) { + return ( +
+
+

+ Welcome to the Community +

+

+ Connect with mentors and peers — ask questions, share wins, discover resources, and join live events. +

+ +
+
+ ); +}