104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import './ContactsSection.css';
|
|
|
|
function ContactsSection({ contacts }) {
|
|
const [copiedType, setCopiedType] = useState(null);
|
|
|
|
const handleCopy = (value, type) => {
|
|
navigator.clipboard.writeText(value).then(() => {
|
|
setCopiedType(type);
|
|
setTimeout(() => setCopiedType(null), 2000);
|
|
});
|
|
};
|
|
|
|
const getContactIcon = (type) => {
|
|
const icons = {
|
|
qq: '💬',
|
|
email: '📧',
|
|
github: '🐙',
|
|
wechat: '💚',
|
|
twitter: '🐦',
|
|
linkedin: '💼'
|
|
};
|
|
return icons[type] || '📱';
|
|
};
|
|
|
|
// 判断 icon 是否为 URL
|
|
const isImageUrl = (icon) => {
|
|
return icon && (icon.startsWith('http://') || icon.startsWith('https://'));
|
|
};
|
|
|
|
// 渲染图标(支持 URL 和 Emoji)
|
|
const renderIcon = (contact) => {
|
|
const icon = contact.icon || getContactIcon(contact.type);
|
|
|
|
if (isImageUrl(icon)) {
|
|
return (
|
|
<img
|
|
src={icon}
|
|
alt={contact.label}
|
|
className="contact-icon-img"
|
|
onError={(e) => {
|
|
e.target.style.display = 'none';
|
|
e.target.nextSibling.style.display = 'block';
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <span className="contact-icon-emoji">{icon}</span>;
|
|
};
|
|
|
|
return (
|
|
<section className="contacts-section">
|
|
<h2 className="section-title">
|
|
<span className="title-icon">📮</span>
|
|
联系方式
|
|
</h2>
|
|
|
|
<div className="contacts-grid">
|
|
{contacts.map((contact, index) => (
|
|
<div key={index} className="contact-card">
|
|
<div className="contact-icon">
|
|
{renderIcon(contact)}
|
|
</div>
|
|
|
|
<div className="contact-info">
|
|
<h3 className="contact-label">{contact.label}</h3>
|
|
<p className="contact-value">{contact.value}</p>
|
|
</div>
|
|
|
|
<div className="contact-actions">
|
|
{contact.link && (
|
|
<a
|
|
href={contact.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="contact-button contact-visit"
|
|
title="访问"
|
|
>
|
|
🔗
|
|
</a>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => handleCopy(contact.value, contact.type)}
|
|
className="contact-button contact-copy"
|
|
title="复制"
|
|
>
|
|
{copiedType === contact.type ? '✓' : '📋'}
|
|
</button>
|
|
</div>
|
|
|
|
{copiedType === contact.type && (
|
|
<div className="copy-toast">已复制!</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default ContactsSection;
|