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

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

欢迎大家把项目拉下来使用哦！

项目地址： https://github.com/hismeyy/react-component-100

今天还是用到了react-icons。这里就不过多介绍啦，大家可以在前面的挑战中看到。

如果大家有什么询问的，或者推荐做的组件，可以评论区，评论哦！

下面是代码展示

代码展示

InfoCard.tsx

js 复制代码

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

js 复制代码

.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

js 复制代码

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;