zetaloop
86 lines
3.5 KiB
TypeScript
86 lines
3.5 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { getUserById, listPostsByAuthor } from "@/lib/api"
|
|
import { MessageSquare, ThumbsUp } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
|
|
export default async function UserProfilePage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params
|
|
const user = await getUserById(id)
|
|
|
|
if (!user) {
|
|
notFound()
|
|
}
|
|
|
|
const userPosts = await listPostsByAuthor(id)
|
|
const favoriteCountText = "—"
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-4xl px-4 py-8 space-y-6">
|
|
<div className="flex items-center gap-6 mb-8">
|
|
<Avatar className="w-24 h-24 border-4 border-background shadow-card">
|
|
<AvatarImage src={user.avatar} alt={user.nickname} />
|
|
<AvatarFallback>{user.nickname[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-bold tracking-tighter leading-tight">{user.nickname}</h1>
|
|
<p className="text-sm text-muted-foreground">{user.bio || "这个人很懒，什么都没写~"}</p>
|
|
<div className="flex gap-4 text-sm text-muted-foreground">
|
|
<span>{userPosts.length} 帖子</span>
|
|
<span>{favoriteCountText} 收藏</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs defaultValue="posts">
|
|
<TabsList>
|
|
<TabsTrigger value="posts">帖子</TabsTrigger>
|
|
<TabsTrigger value="favorites">收藏</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="posts" className="mt-4 space-y-4">
|
|
{userPosts.length === 0 ? (
|
|
<div className="text-center py-12 text-muted-foreground">暂无帖子</div>
|
|
) : (
|
|
userPosts.map((post) => (
|
|
<Link key={post.id} href={`/post/${post.id}`}>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base">{post.title}</CardTitle>
|
|
{post.pinned && <Badge variant="secondary">置顶</Badge>}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground line-clamp-2 mb-3">
|
|
{post.content}
|
|
</p>
|
|
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<ThumbsUp className="h-3 w-3" />
|
|
{post.likeCount}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<MessageSquare className="h-3 w-3" />
|
|
{post.commentCount}
|
|
</span>
|
|
<span>{new Date(post.createdAt).toLocaleDateString("zh-CN")}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="favorites" className="mt-4 space-y-6">
|
|
<div className="text-center py-12 text-muted-foreground">暂不支持查看用户收藏</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|