Profile Card

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
5 
6function ProfileCard({
7  variant = "default",
8  className,
9  children,
10  ...props
11}: React.ComponentProps<"div"> & {
12  variant?: "default" | "horizontal" | "vertical";
13}) {
14  return (
15    <div
16      data-variant={variant}
17      data-slot="profile-card"
18      className={cn(
19        "group/profile-card flex flex-row items-center gap-x-2 data-[variant=vertical]:gap-y-3",
20        "data-[variant=vertical]:flex-col data-[variant=vertical]:text-center",
21        className
22      )}
23      {...props}
24    >
25      {children}
26    </div>
27  );
28}
29 
30function ProfileCardAvatar({
31  className,
32  src,
33  name,
34  ...props
35}: Omit<React.ComponentProps<typeof Avatar>, "children"> & {
36  src: string;
37  name?: string;
38}) {
39  return (
40    <Avatar
41      data-slot="profile-card-avatar"
42      className={cn("overflow-hidden", className)}
43      {...props}
44    >
45      <AvatarImage
46        src={src ?? undefined}
47        alt={name ? `${name}'s avatar` : "Avatar"}
48        className="size-full rounded-none object-cover"
49      />
50      <AvatarFallback className="size-full rounded-none uppercase">
51        {name?.slice(0, 2) || "ME"}
52      </AvatarFallback>
53    </Avatar>
54  );
55}
56 
57function ProfileCardDetails({
58  className,
59  children,
60  name,
61  body,
62  ...props
63}: React.ComponentProps<"div"> & { name?: string; body?: string }) {
64  return (
65    <div
66      data-slot="profile-card-details"
67      className={cn(
68        "flex flex-col group-data-[variant=horizontal]/profile-card:gap-3",
69        "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",
70        "group-data-[variant=vertical]/profile-card:flex-col group-data-[variant=vertical]/profile-card:items-center",
71        className
72      )}
73      {...props}
74    >
75      {children ?? (
76        <>
77          {name && <ProfileCardName data-slot="details-name">{name}</ProfileCardName>}
78          {body && <ProfileCardBody data-slot="details-body">{body}</ProfileCardBody>}
79        </>
80      )}
81    </div>
82  );
83}
84 
85function ProfileCardName({ className, ...props }: React.ComponentProps<"div">) {
86  return (
87    <div
88      data-slot="profile-card-name"
89      className={cn("flex items-center gap-1 text-sm font-medium", className)}
90      {...props}
91    />
92// … truncated