83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { ArrowLeft, Users, Lock, Globe } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { GroupFeed } from "@/components/groups/group-feed"
|
|
import { JoinGroupButton } from "@/components/groups/join-group-button"
|
|
|
|
async function getGroup(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/groups/${id}`, { cache: 'no-store' })
|
|
if (!res.ok) return null
|
|
return res.json()
|
|
} catch (e) {
|
|
return null
|
|
}
|
|
}
|
|
|
|
async function getGroupPosts(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/groups/${id}/posts`, { cache: 'no-store' })
|
|
if (!res.ok) return []
|
|
return res.json()
|
|
} catch (e) {
|
|
return []
|
|
}
|
|
}
|
|
|
|
export default async function GroupDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params
|
|
const group = await getGroup(id)
|
|
const posts = await getGroupPosts(id)
|
|
|
|
if (!group) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/groups">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
|
{group.name}
|
|
{group.privacy === 'private' ? <Lock className="h-4 w-4" /> : <Globe className="h-4 w-4" />}
|
|
</h1>
|
|
<p className="text-muted-foreground">{group.description}</p>
|
|
</div>
|
|
</div>
|
|
<JoinGroupButton groupId={group.id} />
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-[2fr_1fr]">
|
|
<div className="flex flex-col gap-6">
|
|
<GroupFeed groupId={group.id} initialPosts={posts} />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>About</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center text-sm">
|
|
<Users className="mr-2 h-4 w-4 text-muted-foreground" />
|
|
{group.member_count || 0} members
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
Created {new Date(group.created_at).toLocaleDateString()}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|