cunkebao_v3/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx

import React from "react";
import { List, Avatar, Badge } from "antd";
import { ContactData } from "./data";
import styles from "./ContactListSimple.module.scss";

interface ContactListSimpleProps {
  contacts: ContactData[];
  onContactClick: (contact: ContactData) => void;
  selectedContactId?: number;
}

const ContactListSimple: React.FC<ContactListSimpleProps> = ({
  contacts,
  onContactClick,
  selectedContactId,
}) => {
  return (
    <div className={styles.contactListSimple}>
      <div className={styles.header}>全部好友</div>
      <List
        className={styles.list}
        dataSource={contacts}
        renderItem={contact => (
          <List.Item
            key={contact.id}
            onClick={() => onContactClick(contact)}
            className={`${styles.contactItem} ${contact.id === selectedContactId ? styles.selected : ""}`}
          >
            <div className={styles.avatarContainer}>
              <Badge dot={contact.online} color="green" offset={[-5, 5]}>
                <Avatar
                  src={contact.avatar}
                  icon={
                    !contact.avatar && <span>{contact.nickname.charAt(0)}</span>
                  }
                  className={styles.avatar}
                />
              </Badge>
            </div>
            <div className={styles.contactInfo}>
              <div className={styles.name}>{contact.nickname}</div>
            </div>
          </List.Item>
        )}
      />
    </div>
  );
};

export default ContactListSimple;