"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { UserAvatar } from "@/components/ui/user-avatar";

export interface ProfileStat {
  label: string;
  value: string;
}

export interface ProfileAction {
  label: string;
  onClick?: () => void;
}

export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string;
  role?: string;
  avatarSrc?: string;
  avatarAlt?: string;
  status?: "online" | "offline";
  showStatus?: boolean;
  stats?: ProfileStat[];
  primaryAction?: ProfileAction;
  secondaryAction?: ProfileAction;
}

const defaultStats: ProfileStat[] = [
  { label: "Projects", value: "12" },
  { label: "Followers", value: "1.2k" },
  { label: "Following", value: "180" },
];

export const ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(
  (
    {
      className,
      name,
      role = "Product Designer",
      avatarSrc,
      avatarAlt,
      status = "online",
      showStatus = true,
      stats = defaultStats,
      primaryAction = { label: "Message" },
      secondaryAction = { label: "View profile" },
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          "w-full max-w-md rounded-2xl border border-border bg-card p-6 text-foreground",
          className
        )}
        {...props}
      >
        <div className="flex items-center gap-4">
          <UserAvatar
            src={avatarSrc}
            alt={avatarAlt}
            name={name}
            size="lg"
            status={status}
            showStatus={showStatus}
          />
          <div className="space-y-1">
            <h3 className="text-lg font-semibold text-foreground">{name}</h3>
            <p className="text-sm text-muted-foreground">{role}</p>
          </div>
        </div>

        <div className="mt-6 grid grid-cols-3 gap-4 border-y border-border py-4">
          {stats.map((stat) => (
            <div key={stat.label} className="space-y-1 text-center">
              <p className="text-base font-semibold text-foreground">
                {stat.value}
              </p>
              <p className="text-xs text-muted-foreground">{stat.label}</p>
            </div>
          ))}
        </div>

        <div className="mt-6 flex flex-wrap gap-3">
          <button
            type="button"
            onClick={primaryAction.onClick}
            className="inline-flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-muted px-4 py-2 text-sm font-semibold text-foreground transition hover:bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <svg
              className="h-4 w-4"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={1.8}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <path d="M4 6h16v9H7l-3 3V6z" />
              <path d="M8 11h8" />
            </svg>
            {primaryAction.label}
          </button>
          <button
            type="button"
            onClick={secondaryAction.onClick}
            className="inline-flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-sm font-semibold text-primary transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <svg
              className="h-4 w-4"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={1.8}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <path d="M5 12h14" />
              <path d="m13 6 6 6-6 6" />
            </svg>
            {secondaryAction.label}
          </button>
        </div>
      </div>
    );
  }
);

ProfileCard.displayName = "ProfileCard";
Profile Card

Avery Taylor

Dependencies

Files

Installation
