Author Card

1import { memo, useId } from "react";
2import { User } from "lucide-react";
3import { cn } from "@/lib/utils";
4import { AuthorAvatar } from "./parts/avatar";
5import { resolveTone } from "./parts/tone-resolver";
6import { AUTHOR_CARD_DEFAULT_LABELS, type AuthorCardProps } from "./types";
7 
8function AuthorCardInner(props: AuthorCardProps) {
9  const {
10    name,
11    role,
12    bio,
13    imageSrc,
14    imageAlt,
15    fallbackIcon = User,
16    href,
17    linkComponent,
18    tone = "primary",
19    headingAs: HeadingTag = "h3",
20    labels,
21    className,
22    headingClassName,
23    nameClassName,
24    bioClassName,
25  } = props;
26 
27  const nameId = useId();
28  const toneClasses = resolveTone(tone);
29  const resolvedLabels = { ...AUTHOR_CARD_DEFAULT_LABELS, ...labels };
30  const resolvedAlt = imageAlt ?? name;
31 
32  const isClickable = Boolean(href);
33  const RootEl = isClickable ? linkComponent ?? "a" : "div";
34 
35  const rootClass = cn(
36    "block bg-card rounded-2xl p-6 border border-border/50 transition-colors",
37    isClickable &&
38      "hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
39    className
40  );
41 
42  const linkProps = isClickable
43    ? { href, "aria-labelledby": nameId }
44    : {};
45 
46  return (
47    <RootEl className={rootClass} {...linkProps}>
48      <HeadingTag
49        className={cn(
50          "text-lg font-serif font-bold text-foreground mb-4",
51          headingClassName
52        )}
53      >
54        {resolvedLabels.heading}
55      </HeadingTag>
56 
57      <div className="flex items-center gap-4">
58        <AuthorAvatar
59          imageSrc={imageSrc}
60          imageAlt={resolvedAlt}
61          fallbackIcon={fallbackIcon}
62          toneClasses={toneClasses}
63        />
64        <div>
65          <p
66            id={nameId}
67            className={cn("font-semibold text-foreground", nameClassName)}
68          >
69            {name}
70          </p>
71          <p className="text-sm text-muted-foreground">{role}</p>
72        </div>
73      </div>
74 
75      {bio ? (
76        <p className={cn("text-sm text-muted-foreground mt-4", bioClassName)}>
77          {bio}
78        </p>
79      ) : null}
80    </RootEl>
81  );
82}
83 
84export const AuthorCard = memo(AuthorCardInner);
85AuthorCard.displayName = "AuthorCard";