Profile Card

An extension of the avatar component with more details on the individual. Good for blog posts etc.

Pro Marketing Figma ReactFree

components/shadcncraft/pro-marketing/profile-card.tsx

import * as React from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

function ProfileCard({
  variant = "default",
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: "default" | "horizontal" | "vertical";
}) {
  return (
    <div
      data-variant={variant}
      data-slot="profile-card"
      className={cn(
        "group/profile-card flex flex-row items-center gap-2",
        "data-[variant=vertical]:flex-col data-[variant=vertical]:gap-3 data-[variant=vertical]:text-center",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

function ProfileCardAvatar({
  className,
  size = "default",
  src,
  name,
  ...props
}: Omit<React.ComponentProps<typeof Avatar>, "children"> & {
  size?: "default" | "sm" | "lg";
  src: string;
  name?: string;
}) {
  return (
    <Avatar
      data-slot="profile-card-avatar"
      className={cn(
        size === "sm" && "size-6",
        size === "default" && "size-10",
        size === "lg" && "size-24",
        className
      )}
      {...props}
    >
      <AvatarImage
        src={src ?? undefined}
        alt={name ? `${name}'s avatar` : "Avatar"}
        className="size-full rounded-none object-cover"
      />
      <AvatarFallback className="size-full rounded-none uppercase">
        {name?.slice(0, 2) || "ME"}
      </AvatarFallback>
    </Avatar>
  );
}

function ProfileCardDetails({
  className,
  children,
  name,
  body,
  ...props
}: React.ComponentProps<"div"> & { name?: string; body?: string }) {
  return (
    <div
      data-slot="profile-card-details"
      className={cn(
        "flex flex-col",
        "group-data-[variant=horizontal]/profile-card:w-full group-data-[variant=horizontal]/profile-card:flex-row group-data-[variant=horizontal]/profile-card:items-center group-data-[variant=horizontal]/profile-card:justify-between group-data-[variant=horizontal]/profile-card:gap-4",
        "group-data-[variant=vertical]/profile-card:flex-col group-data-[variant=vertical]/profile-card:items-center",
        className
      )}
      {...props}
    >
      {children ?? (
        <>
          {name && <ProfileCardName data-slot="details-name">{name}</ProfileCardName>}
          {body && <ProfileCardBody data-slot="details-body">{body}</ProfileCardBody>}
        </>
      )}
    </div>
  );
}

function ProfileCardName({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="profile-card-name"
      className={cn(
        "flex items-center gap-1 text-sm font-semibold text-foreground",
        className
      )}
      {...props}
    />
  );
}

function ProfileCardBody({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="profile-card-body"
      className={cn("text-xs text-muted-foreground", className)}
      {...props}
    />
  );
}

function ProfileCardVerifiedBadge({ className, ...props }: React.ComponentProps<"svg">) {
  // Intentional hardcoded colors to simulate Twitter's verified badge
  return (
    <svg
      data-slot="profile-card-verified-badge"
      viewBox="0 0 14 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("size-3.5", className)}
      {...props}
    >
      <g clipPath="url(#clip0_242_3375)">
        <mask
          id="mask0_242_3375"
          style={{ maskType: "luminance" }}
          maskUnits="userSpaceOnUse"
          x="0"
          y="0"
          width="14"
          height="14"
        >
          <path d="M0 0H14V14H0V0Z" fill="white" />
        </mask>
        <g mask="url(#mask0_242_3375)">
          <path
            d="M10.8112 2.47891C10.9442 2.80091 11.1992 3.05591 11.5212 3.18991L12.6482 3.65691C12.8074 3.72275 12.9521 3.81935 13.0739 3.94118C13.1957 4.06302 13.2923 4.20769 13.3582 4.36691C13.4912 4.68891 13.4912 5.04991 13.3582 5.37191L12.8922 6.49791C12.826 6.65718 12.792 6.82795 12.792 7.00041C12.792 7.17287 12.826 7.34364 12.8922 7.50291L13.3582 8.62891C13.4242 8.78804 13.4582 8.95863 13.4582 9.13091C13.4582 9.30291 13.4242 9.47391 13.3582 9.63291C13.2922 9.79222 13.1955 9.93695 13.0735 10.0588C12.9514 10.1806 12.8066 10.2772 12.6472 10.3429L11.5212 10.8089C11.3618 10.8746 11.2169 10.9712 11.0949 11.093C10.9729 11.2149 10.8761 11.3596 10.8102 11.5189L10.3432 12.6459C10.2775 12.8053 10.1809 12.9502 10.0591 13.0723C9.93721 13.1943 9.79246 13.2911 9.63312 13.3571C9.47378 13.423 9.30299 13.4569 9.13054 13.4567C8.95808 13.4565 8.78737 13.4222 8.62818 13.3559L7.50218 12.8899C7.34298 12.824 7.17236 12.7902 7.00008 12.7904C6.8278 12.7906 6.65724 12.8247 6.49818 12.8909L5.37118 13.3569C5.05018 13.4899 4.68918 13.4899 4.36718 13.3569C4.04518 13.2239 3.79018 12.9689 3.65718 12.6469L3.19018 11.5199C3.05718 11.1979 2.80218 10.9429 2.48018 10.8089L1.35318 10.3419C1.19396 10.2761 1.04929 10.1795 0.927453 10.0576C0.80562 9.9358 0.709017 9.79113 0.643178 9.63191C0.511178 9.31191 0.510178 8.95091 0.643178 8.62891L1.10918 7.50291C1.24218 7.18091 1.24218 6.81991 1.10818 6.49891L0.643178 5.37091C0.577023 5.21164 0.542969 5.04087 0.542969 4.86841C0.542969 4.69595 0.577023 4.52518 0.643178 4.36591C0.709132 4.2066 0.805889 4.06187 0.927899 3.94003C1.04991 3.81819 1.19477 3.72164 1.35418 3.65591L2.48018 3.18991C2.80118 3.05691 3.05718 2.80191 3.19018 2.48091L3.65718 1.35391C3.79018 1.03191 4.04618 0.77691 4.36718 0.64391C4.52645 0.577756 4.69721 0.543701 4.86968 0.543701C5.04214 0.543701 5.21291 0.577756 5.37218 0.64391L6.49818 1.10991C6.82018 1.24291 7.18118 1.24291 7.50218 1.10891L8.63018 0.64391C8.95218 0.51091 9.31318 0.51091 9.63418 0.64391C9.95518 0.77691 10.2112 1.03291 10.3442 1.35391L10.8112 2.48091V2.47891Z"
            fill="#0788F5"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M9.74301 5.16485C9.83701 5.01785 9.86801 4.83985 9.83001 4.66985C9.79201 4.49985 9.68901 4.35185 9.54201 4.25785C9.39501 4.16385 9.21701 4.13285 9.04701 4.17085C8.87701 4.20885 8.72901 4.31185 8.63501 4.45885L6.06501 8.49685L4.88901 7.02685C4.78001 6.89085 4.62201 6.80385 4.44901 6.78485C4.27601 6.76585 4.10201 6.81585 3.96601 6.92485C3.83001 7.03385 3.74301 7.19185 3.72301 7.36485C3.70301 7.53785 3.75401 7.71185 3.86301 7.84785L5.61301 10.0359C5.67801 10.1179 5.76201 10.1819 5.85701 10.2249C5.95201 10.2679 6.05701 10.2869 6.16101 10.2809C6.26501 10.2749 6.36701 10.2449 6.45701 10.1919C6.54701 10.1389 6.62301 10.0659 6.67901 9.97685L9.74301 5.16485Z"
            fill="white"
          />
        </g>
      </g>
      <defs>
        <clipPath id="clip0_242_3375">
          <rect width="14" height="14" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}

export {
  ProfileCard,
  ProfileCardAvatar,
  ProfileCardBody,
  ProfileCardDetails,
  ProfileCardName,
  ProfileCardVerifiedBadge,
};