42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
"use client";
|
||
/**
|
||
* 订阅页用户信息行
|
||
*
|
||
* 视觉规格（与设计稿对齐）：
|
||
* - 56×56 粉色圆形头像
|
||
* - 头像右侧两行文本：用户名（16px/600）、副标题（12px/secondary）
|
||
* - 无头像时显示默认用户图标
|
||
*/
|
||
import { UserMessageAvatar } from "@/app/chat/components/user-message-avatar";
|
||
|
||
import styles from "./subscription-user-row.module.css";
|
||
|
||
export interface SubscriptionUserRowProps {
|
||
name: string;
|
||
/** null → 显示默认用户图标 */
|
||
avatarUrl: string | null;
|
||
subtitle?: string;
|
||
className?: string;
|
||
}
|
||
|
||
export function SubscriptionUserRow({
|
||
name,
|
||
avatarUrl,
|
||
subtitle = "VIP membership not activated",
|
||
className,
|
||
}: SubscriptionUserRowProps) {
|
||
return (
|
||
<div className={[styles.row, className].filter(Boolean).join(" ")}>
|
||
<UserMessageAvatar
|
||
avatarUrl={avatarUrl}
|
||
className={styles.avatar}
|
||
size={56}
|
||
/>
|
||
<div className={styles.text}>
|
||
<p className={styles.name}>{name}</p>
|
||
<p className={styles.subtitle}>{subtitle}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|