Profile Card

import { ProfileCard } from "@/components/ui/profile-card";

export default function Example() {
  return <ProfileCard />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ProfileCard = forwardRef(({ className, user = {}, ...props }, ref) => (
  <div ref={ref} className={cn("w-full max-w-sm rounded-lg border bg-card shadow-sm", className)} {...props}>
    {user.cover && <div className="h-24 overflow-hidden rounded-t-lg"><img src={user.cover} alt="" className="h-full w-full object-cover" /></div>}
    <div className={cn("flex flex-col items-center p-6", user.cover && "-mt-10")}>
      <div className="flex h-20 w-20 items-center justify-center rounded-full border-4 border-background bg-primary text-2xl font-bold text-primary-foreground">
        {user.avatar ? <img src={user.avatar} alt="" className="h-full w-full rounded-full object-cover" /> : (user.name?.[0] || "U")}
      </div>
      <h3 className="mt-3 text-lg font-semibold">{user.name}</h3>
      {user.role && <p className="text-sm text-muted-foreground">{user.role}</p>}
      {user.bio && <p className="mt-2 text-center text-sm text-muted-foreground">{user.bio}</p>}
      {user.stats && (
        <div className="mt-4 flex w-full justify-around border-t pt-4">
          {user.stats.map((stat, i) => (
            <div key={i} className="text-center">
              <div className="text-lg font-bold">{stat.value}</div>
              <div className="text-xs text-muted-foreground">{stat.label}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  </div>
));
ProfileCard.displayName = "ProfileCard";

export { ProfileCard };