127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
import { BadgeCheck, MessageSquare, Pencil, Plus } from "lucide-react";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Stat {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface User {
|
|
name: string;
|
|
username: string;
|
|
avatar?: string;
|
|
coverImage?: string;
|
|
bio?: string;
|
|
verified?: boolean;
|
|
}
|
|
|
|
interface UserProfile12Props {
|
|
user?: User;
|
|
stats?: Stat[];
|
|
className?: string;
|
|
}
|
|
|
|
const UserProfile12 = ({
|
|
user = {
|
|
name: "امیر رضایی",
|
|
username: "@amir_rezaei",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar12.jpg",
|
|
coverImage:
|
|
"/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
|
|
bio: "توسعهدهنده فولاستک با علاقه به ساخت وباپلیکیشنهای زیبا و پرفورمنس. مشارکتکننده متنباز و علاقهمند به TypeScript.",
|
|
verified: true,
|
|
},
|
|
stats = [
|
|
{ label: "پستها", value: "۸۴۷" },
|
|
{ label: "دنبالشده", value: "۳۱۲" },
|
|
{ label: "دنبالکننده", value: "۸۹ هزار" },
|
|
],
|
|
className,
|
|
}: UserProfile12Props) => {
|
|
const initials = user.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("");
|
|
|
|
return (
|
|
<Card
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("w-full max-w-md overflow-hidden pt-0", className)}
|
|
>
|
|
<div
|
|
className="h-36 bg-muted bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: user.coverImage
|
|
? `url(${user.coverImage})`
|
|
: undefined,
|
|
}}
|
|
/>
|
|
|
|
<CardContent className="relative px-6 pb-6">
|
|
<Avatar className="-mt-14 size-28 border-4 border-card shadow-lg">
|
|
<AvatarImage
|
|
src={user.avatar}
|
|
alt={user.name}
|
|
className="object-cover"
|
|
/>
|
|
<AvatarFallback className="text-xl font-semibold">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="absolute top-4 end-6 gap-1.5"
|
|
>
|
|
<Pencil className="size-3.5" />
|
|
ویرایش پروفایل
|
|
</Button>
|
|
|
|
<div className="mt-3">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-xl font-bold">{user.name}</h2>
|
|
{user.verified && (
|
|
<BadgeCheck className="size-6 fill-sky-500 text-card" />
|
|
)}
|
|
</div>
|
|
<p className="text-muted-foreground" dir="rtl">
|
|
{user.username}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center gap-2">
|
|
<Button className="gap-1.5">
|
|
<Plus className="size-4" />
|
|
دنبال کردن
|
|
</Button>
|
|
<Button variant="outline" size="icon" aria-label="پیام">
|
|
<MessageSquare className="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{user.bio && (
|
|
<p className="mt-5 text-sm text-muted-foreground">{user.bio}</p>
|
|
)}
|
|
|
|
<div className="mt-6 flex items-center justify-between border-t pt-6">
|
|
{stats.map((stat) => (
|
|
<div key={stat.label} className="text-center">
|
|
<div className="text-xl font-bold">{stat.value}</div>
|
|
<div className="text-sm text-muted-foreground">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { UserProfile12 };
|