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

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

组件描述
组件适用于需要展示图文信息的场景，比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示

样式展示

代码展示

InfoCard.tsx

import './InfoCard.css'interface InfoCardProps {title: string;description: string;imgSrc: string;imgAlt?: string;
}const InfoCard = ({ title, description, imgSrc, imgAlt = title
}: InfoCardProps) => {return (<div className='info-card'><div className='img'>{imgSrc && <img src={imgSrc} alt={imgAlt} />}</div><div className="info"><h6>{title}</h6><p>{description}</p></div></div>)
}export default InfoCard

InfoCard.css

.info-card {box-sizing: border-box;width: 240px;height: 80px;border-radius: 10px;background-color: #F5F5F5;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);display: flex;justify-content: left;align-items: center;padding: 5px 5px 5px 10px;cursor: pointer;transition: all 0.3s ease;transform-origin: center;
}.info-card .img {width: 60px;height: 60px;border-radius: 6px;overflow: hidden;display: flex;justify-content: center;align-items: center;transition: transform 0.3s ease;
}.info-card .img img {width: 100%;height: 100%;object-fit: cover;
}.info-card .info{margin-left: 5px;height: 60px;
}.info-card .info h6 {all: unset;display: block;width: 160px;font-size: 14px;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: color 0.3s ease;
}.info-card .info p {all: unset;display: -webkit-box;width: 160px;margin-top: 10px;font-size: 12px;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;line-height: 1.3;transition: color 0.3s ease;line-clamp: 2;box-orient: vertical;
}.info-card:hover {transform: translateY(-2px) scale(1.02);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);background-color: #ffffff;
}.info-card:hover .img {transform: scale(1.05);
}.info-card:hover .info h6 {color: #f08a5d;
}.info-card:hover .info p {color: #666;
}

使用

App.tsx

import './App.css'
import InfoCard from './components/card/infoCard01/InfoCard'function App() {return (<><InfoCardtitle="React 18 新特性"description="React 18 带来了令人兴奋的新特性，包括自动批处理、Transitions API 和 Suspense 的改进。这些更新显著提升了应用性能和用户体验。"imgSrc="https://cdn1.iconfinder.com/data/icons/programing-development-8/24/react_logo-512.png"/></>)
}export default App