挑战用React封装100个组件【009】

Hello，大家好，今天我挑战的组件是这样的！

欢迎大家把项目拉下来使用哦！
项目地址： https://github.com/hismeyy/react-component-100
今天还是用到了react-icons。这里就不过多介绍啦，大家可以在前面的挑战中看到。
如果大家有什么询问的，或者推荐做的组件，可以评论区，评论哦！
下面是代码展示

代码展示

InfoCard.tsx

import "./InfoCard.css";
import { FaInstagram } from "react-icons/fa";
import { FaFacebookF } from "react-icons/fa";
import { FaTwitter } from "react-icons/fa";
import { AiFillWechat } from "react-icons/ai";
import { FaGithub } from "react-icons/fa";
import { FiEdit } from "react-icons/fi";interface InfoCardProps {name: string;birthday: string;location: string;job: string;email: string;avatarSrc: string;avatarAlt: string;
}const InfoCard: React.FC<InfoCardProps> = ({ name, birthday, location, job, email, avatarSrc, avatarAlt }) => {return (<div className="info-card"><div className="edit"><FiEdit /></div><div className="info-avatar"><img src={avatarSrc} alt={avatarAlt} /></div><div className="info"><div className="info-name"><span>name：</span>{name}</div><div className="info-birthday"><span>birthday：</span>{birthday}</div><div className="info-location"><span>location：</span>{location}</div><div className="info-job"><span>job：</span>{job}</div><div className="info-email"><span>email：</span>{email}</div><div className="info-community"><div><FaInstagram /></div><div><FaFacebookF /></div><div><FaTwitter /></div><div><AiFillWechat /></div><div><FaGithub /></div></div></div></div>)
}export default InfoCard

InfoCard.css

.info-card {box-sizing: border-box;width: 480px;height: 220px;border-radius: 25px;background-color: #FFFFFF;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.0.1);display: flex;padding: 25px 35px;overflow: hidden;font-family: "Microsoft YaHei", SimSun, "PingFang SC", "Helvetica Neue", Arial, sans-serif;position: relative;transition: transform 0.3s ease, box-shadow 0.3s ease;animation: fadeIn 0.5s ease-in-out;
}.info-card:hover {transform: scale(1.05);box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}.info-card .edit{position: absolute;top: 20px;right: 20px;cursor: pointer;
}.info-card .info-avatar{display: flex;justify-content: center;align-items: center;width: 100px;height: 100px;border-radius: 50%;overflow: hidden;background-color: #A891CE;transition: transform 0.3s ease;
}.info-card .info-avatar:hover {animation: spin 1s ease-in-out;
}.info-card .info-avatar img{width: 100%;height: 100%;object-fit: cover;
}.info-card .info {margin-left: 40px;font-size: 16px;display: flex;flex-direction: column;align-items: left;text-align: left;gap: 5px;
}.info-card .info span{font-weight: bold;
}.info-card .info .info-community{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 10px;font-size: 10px;color: #5c5c5c;
}.info-card .info .info-community div{width: 25px;height: 25px;border-radius: 50%;overflow: hidden;background-color: #5C55B0;color: #FFFFFF;display: flex;justify-content: center;align-items: center;cursor: pointer;font-size: 15px;transition: transform 0.3s ease, background-color 0.3s ease;
}.info-card .info .info-community div:hover {transform: scale(1.2);background-color: #4A47A3;
}@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}

使用

App.tsx

import './App.css'
import InfoCard from './components/card/infoCard05/InfoCard';function App() {return (<InfoCard name="Jane Doe"birthday="1985年7月20日"location="美国，纽约"job="软件工程师"email="jane.doe@example.com"avatarSrc="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=500&h=500&q=80"avatarAlt="Jane Doe的头像"/>);
}export default App;