69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Plus, Users } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
|
|
async function getGroups() {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/groups/`, { cache: 'no-store' })
|
|
if (!res.ok) return []
|
|
return res.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
return []
|
|
}
|
|
}
|
|
|
|
export default async function GroupsPage() {
|
|
const groups = await getGroups()
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Communities</h1>
|
|
<p className="text-muted-foreground">Join a group to connect with other fans.</p>
|
|
</div>
|
|
<Link href="/groups/create">
|
|
<Button>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Create Group
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{groups.length > 0 ? (
|
|
groups.map((group: any) => (
|
|
<Link key={group.id} href={`/groups/${group.id}`}>
|
|
<Card className="h-full hover:bg-muted/50 transition-colors">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-between">
|
|
{group.name}
|
|
{group.privacy === 'private' && (
|
|
<span className="text-xs bg-secondary px-2 py-1 rounded-full font-normal">Private</span>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground line-clamp-2 mb-4">
|
|
{group.description || "No description"}
|
|
</p>
|
|
<div className="flex items-center text-xs text-muted-foreground">
|
|
<Users className="mr-1 h-3 w-3" />
|
|
{group.member_count || 0} members
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))
|
|
) : (
|
|
<div className="col-span-full text-center py-12 text-muted-foreground">
|
|
No groups found. Be the first to create one!
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|