284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import useAuthStore from '../store/authStore'
|
||
import Header from '../components/nav/Header'
|
||
import Footer from '../components/Footer'
|
||
import {
|
||
UsersIcon,
|
||
ChatBubbleLeftRightIcon,
|
||
HeartIcon,
|
||
FireIcon,
|
||
TrophyIcon,
|
||
UserGroupIcon,
|
||
PlusIcon,
|
||
ArrowRightIcon
|
||
} from '@heroicons/react/24/outline'
|
||
|
||
export default function CommunityPage() {
|
||
const router = useRouter()
|
||
const user = useAuthStore(state => state.user)
|
||
|
||
// Redirect if not logged in
|
||
useEffect(() => {
|
||
if (!user) {
|
||
router.push('/login')
|
||
}
|
||
}, [user, router])
|
||
|
||
// Don't render if no user
|
||
if (!user) {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#8D6B1D] mx-auto mb-4"></div>
|
||
<p className="text-[#4A4A4A]">Loading...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Mock community data
|
||
const communityStats = [
|
||
{ label: 'Members', value: '12,487', icon: UsersIcon, color: 'text-blue-600' },
|
||
{ label: 'Active Groups', value: '156', icon: UserGroupIcon, color: 'text-green-600' },
|
||
{ label: 'Discussions', value: '3,421', icon: ChatBubbleLeftRightIcon, color: 'text-purple-600' },
|
||
{ label: 'Daily Active', value: '2,186', icon: FireIcon, color: 'text-orange-600' }
|
||
]
|
||
|
||
const trendingGroups = [
|
||
{
|
||
name: 'Eco Warriors',
|
||
members: '1,284',
|
||
category: 'Sustainability',
|
||
image: '🌱',
|
||
description: 'Join fellow eco-enthusiasts in making the world greener'
|
||
},
|
||
{
|
||
name: 'Zero Waste Living',
|
||
members: '892',
|
||
category: 'Lifestyle',
|
||
image: '♻️',
|
||
description: 'Tips and tricks for living a zero-waste lifestyle'
|
||
},
|
||
{
|
||
name: 'Sustainable Fashion',
|
||
members: '756',
|
||
category: 'Fashion',
|
||
image: '👕',
|
||
description: 'Ethical fashion choices and sustainable brands'
|
||
},
|
||
{
|
||
name: 'Green Tech',
|
||
members: '634',
|
||
category: 'Technology',
|
||
image: '💚',
|
||
description: 'Discuss the latest in green technology and innovation'
|
||
}
|
||
]
|
||
|
||
const recentPosts = [
|
||
{
|
||
user: 'Sarah M.',
|
||
group: 'Eco Warriors',
|
||
time: '2 hours ago',
|
||
content: 'Just discovered a fantastic new way to upcycle old furniture! Has anyone tried painting with eco-friendly paints?',
|
||
likes: 23,
|
||
comments: 8
|
||
},
|
||
{
|
||
user: 'David K.',
|
||
group: 'Zero Waste Living',
|
||
time: '4 hours ago',
|
||
content: 'Week 3 of my zero-waste challenge! Managed to produce only 1 small jar of waste. Here are my top tips...',
|
||
likes: 45,
|
||
comments: 12
|
||
},
|
||
{
|
||
user: 'Maria L.',
|
||
group: 'Sustainable Fashion',
|
||
time: '6 hours ago',
|
||
content: 'Found an amazing local brand that makes clothes from recycled ocean plastic. Their quality is incredible!',
|
||
likes: 38,
|
||
comments: 15
|
||
}
|
||
]
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col bg-gray-50">
|
||
<Header />
|
||
|
||
<main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Header Section */}
|
||
<div className="text-center mb-12">
|
||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||
Welcome to Profit Planet Community 🌍
|
||
</h1>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
Connect with like-minded individuals, share sustainable practices, and make a positive impact together.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Community Stats */}
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
|
||
{communityStats.map((stat, index) => (
|
||
<div key={index} className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 text-center">
|
||
<stat.icon className={`h-8 w-8 ${stat.color} mx-auto mb-3`} />
|
||
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||
<p className="text-sm text-gray-600">{stat.label}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
{/* Main Content */}
|
||
<div className="lg:col-span-2 space-y-8">
|
||
{/* Trending Groups */}
|
||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className="text-xl font-semibold text-gray-900 flex items-center">
|
||
<TrophyIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />
|
||
Trending Groups
|
||
</h2>
|
||
<button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium flex items-center">
|
||
View All
|
||
<ArrowRightIcon className="h-4 w-4 ml-1" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{trendingGroups.map((group, index) => (
|
||
<div key={index} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer">
|
||
<div className="flex items-start space-x-3">
|
||
<div className="text-2xl">{group.image}</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-semibold text-gray-900">{group.name}</h3>
|
||
<p className="text-xs text-[#8D6B1D] font-medium mb-1">{group.category}</p>
|
||
<p className="text-sm text-gray-600 mb-2">{group.description}</p>
|
||
<p className="text-xs text-gray-500">{group.members} members</p>
|
||
</div>
|
||
</div>
|
||
<button className="w-full mt-3 px-3 py-2 bg-[#8D6B1D]/10 text-[#8D6B1D] rounded-lg text-sm font-medium hover:bg-[#8D6B1D]/20 transition-colors">
|
||
Join Group
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Recent Discussions */}
|
||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className="text-xl font-semibold text-gray-900 flex items-center">
|
||
<ChatBubbleLeftRightIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />
|
||
Recent Discussions
|
||
</h2>
|
||
<button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium">
|
||
Start Discussion
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{recentPosts.map((post, index) => (
|
||
<div key={index} className="border-b border-gray-100 pb-6 last:border-b-0">
|
||
<div className="flex items-start space-x-3">
|
||
<div className="w-10 h-10 bg-[#8D6B1D]/20 rounded-full flex items-center justify-center">
|
||
<span className="text-sm font-semibold text-[#8D6B1D]">
|
||
{post.user.charAt(0)}
|
||
</span>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2 mb-1">
|
||
<span className="font-medium text-gray-900">{post.user}</span>
|
||
<span className="text-gray-300">•</span>
|
||
<span className="text-sm text-[#8D6B1D]">{post.group}</span>
|
||
<span className="text-gray-300">•</span>
|
||
<span className="text-sm text-gray-500">{post.time}</span>
|
||
</div>
|
||
<p className="text-gray-800 mb-3">{post.content}</p>
|
||
<div className="flex items-center space-x-4">
|
||
<button className="flex items-center space-x-1 text-gray-500 hover:text-red-500 transition-colors">
|
||
<HeartIcon className="h-4 w-4" />
|
||
<span className="text-sm">{post.likes}</span>
|
||
</button>
|
||
<button className="flex items-center space-x-1 text-gray-500 hover:text-[#8D6B1D] transition-colors">
|
||
<ChatBubbleLeftRightIcon className="h-4 w-4" />
|
||
<span className="text-sm">{post.comments}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sidebar */}
|
||
<div className="space-y-6">
|
||
{/* Quick Actions */}
|
||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||
<h3 className="font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
||
<div className="space-y-3">
|
||
<button className="w-full flex items-center justify-center px-4 py-3 bg-[#8D6B1D] text-white rounded-lg hover:bg-[#7A5E1A] transition-colors">
|
||
<PlusIcon className="h-4 w-4 mr-2" />
|
||
Create Group
|
||
</button>
|
||
<button className="w-full flex items-center justify-center px-4 py-3 border border-[#8D6B1D] text-[#8D6B1D] rounded-lg hover:bg-[#8D6B1D]/10 transition-colors">
|
||
<ChatBubbleLeftRightIcon className="h-4 w-4 mr-2" />
|
||
Start Discussion
|
||
</button>
|
||
<button
|
||
onClick={() => router.push('/dashboard')}
|
||
className="w-full flex items-center justify-center px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||
>
|
||
Back to Dashboard
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* My Groups */}
|
||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||
<h3 className="font-semibold text-gray-900 mb-4">My Groups</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
|
||
<div className="text-lg">🌱</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-900">Eco Warriors</p>
|
||
<p className="text-xs text-gray-500">1,284 members</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
|
||
<div className="text-lg">♻️</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-900">Zero Waste Living</p>
|
||
<p className="text-xs text-gray-500">892 members</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Community Guidelines */}
|
||
<div className="bg-gradient-to-br from-[#8D6B1D]/10 to-[#C49225]/10 rounded-lg p-6 border border-[#8D6B1D]/20">
|
||
<h3 className="font-semibold text-gray-900 mb-2">Community Guidelines</h3>
|
||
<ul className="text-sm text-gray-700 space-y-1">
|
||
<li>• Be respectful and kind</li>
|
||
<li>• Stay on topic</li>
|
||
<li>• Share authentic experiences</li>
|
||
<li>• Help others learn and grow</li>
|
||
</ul>
|
||
<button className="text-xs text-[#8D6B1D] hover:underline mt-3">
|
||
Read full guidelines
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
)
|
||
} |