Profile Card

1
import type { ComponentProps } from "react";
2

3
import {
4
  Avatar,
5
  AvatarFallback,
6
  AvatarImage,
7
} from "@/components/ui/pxl/avatar";
8
import { cn } from "@/lib/utils";
9

10
function ProfileCard({
11
  orientation = "default",
12
  className,
13
  children,
14
  ...props
15
}: ComponentProps<"div"> & {
16
  orientation?: "default" | "horizontal" | "vertical";
17
}) {
18
  return (
19
    <div
20
      data-orientation={orientation}
21
      data-slot="profile-card"
22
      className={cn(
23
        "group/profile-card flex flex-row items-center gap-x-1.5 data-[orientation=vertical]:gap-y-2.5",
24
        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:text-center",
25
        className,
26
      )}
27
      {...props}
28
    >
29
      {children}
30
    </div>
31
  );
32
}
33

34
function ProfileCardAvatar({
35
  className,
36
  src,
37
  name,
38
  ...props
39
}: Omit<ComponentProps<typeof Avatar>, "children"> & {
40
  src: string;
41
  name?: string;
42
}) {
43
  return (
44
    <Avatar
45
      data-slot="profile-card-avatar"
46
      className={cn("overflow-hidden", className)}
47
      {...props}
48
    >
49
      <AvatarImage
50
        src={src ?? undefined}
51
        alt={name ? `${name}'s avatar` : "Avatar"}
52
      />
53
      <AvatarFallback>{name?.slice(0, 2) || "ME"}</AvatarFallback>
54
    </Avatar>
55
  );
56
}
57

58
function ProfileCardDetails({
59
  className,
60
  children,
61
  name,
62
  body,
63
  ...props
64
}: ComponentProps<"div"> & { name?: string; body?: string }) {
65
  return (
66
    <div
67
      data-slot="profile-card-details"
68
      className={cn(
69
        "flex flex-col group-data-[orientation=horizontal]/profile-card:gap-2",
70
        "group-data-[orientation=horizontal]/profile-card:w-full group-data-[orientation=horizontal]/profile-card:flex-row group-data-[orientation=horizontal]/profile-card:items-center group-data-[orientation=horizontal]/profile-card:justify-between",
71
        "group-data-[orientation=vertical]/profile-card:flex-col group-data-[orientation=vertical]/profile-card:items-center",
72
        className,
73
      )}
74
      {...props}
75
    >
76
      {children ?? (
77
        <>
78
          {name && (
79
            <ProfileCardName data-slot="details-name">{name}</ProfileCardName>
80
          )}
81
          {body && (
82
            <ProfileCardBody data-slot="details-body">{body}</ProfileCardBody>
83
          )}
84
        </>
85
      )}
86
    </div>
87
  );
88
}
89

90
function ProfileCardName({ className, ...props }: ComponentProps<"div">) {
91
  return (
92
    <div
93
      data-slot="profile-card-name"
94
      className={cn("flex items-center gap-1 text-sm font-medium", className)}
95
      {...props}
96
    />
97
  );
98
}
99

100
function ProfileCardBody({ className, ...props }: ComponentProps<"div">) {
101
  return (
102
    <div
103
      data-slot="profile-card-body"
104
      className={cn("text-xs text-muted-foreground", className)}
105
      {...props}
106
    />
107
  );
108
}
109

110
function ProfileCardVerifiedBadge({
111
  className,
112
  ...props
113
}: ComponentProps<"svg">) {
114
  return (
115
    <svg
116
      data-slot="profile-card-verified-badge"
117
      viewBox="0 0 24 24"
118
      xmlns="http://www.w3.org/2000/svg"
119
      className={cn("size-3.5 fill-primary-foreground", className)}
120
      {...props}
121
    >
122
      <path d="M18 4H20V6H22V18H20V20H18V22H6V20H4V18H2V6H4V4H6V2H18V4ZM15 9H13V11H11V13H9V11H5V13H7V15H9V17H11V15H13V13H15V11H17V9H19V7H15V9Z"></path>
123
    </svg>
124
  );
125
}
126

127
export {
128
  ProfileCard,
129
  ProfileCardAvatar,
130
  ProfileCardBody,
131
  ProfileCardDetails,
132
  ProfileCardName,
133
  ProfileCardVerifiedBadge,
134
};