f0a6a364f2
Align Sidebar & BottomNav menus, remove "Search", add user profile mock data, implement /api/users, add FilterDrawer, complete Section, ProfileHeader, MetricsRFM components Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
import { Badge } from "@/components/ui/badge"
|
|
|
|
export default function ProfileHeader({
|
|
name,
|
|
avatar,
|
|
email,
|
|
phone,
|
|
tags = [],
|
|
}: {
|
|
name: string
|
|
avatar?: string
|
|
email: string
|
|
phone: string
|
|
tags?: string[]
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative h-12 w-12 rounded-full overflow-hidden border bg-white">
|
|
<Image
|
|
src={avatar || "/placeholder.svg?height=48&width=48&query=user+avatar"}
|
|
alt={`${name} 的头像`}
|
|
fill
|
|
sizes="48px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="font-medium truncate">{name}</div>
|
|
<div className="text-xs text-muted-foreground truncate">{email}</div>
|
|
<div className="text-xs text-muted-foreground">{phone}</div>
|
|
{!!tags.length && (
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{tags.slice(0, 3).map((t) => (
|
|
<Badge key={t} variant="secondary" className="text-[10px]">
|
|
{t}
|
|
</Badge>
|
|
))}
|
|
{tags.length > 3 && <Badge variant="outline" className="text-[10px]">+{tags.length - 3}</Badge>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|