董海洋
83 lines
1.7 KiB
TypeScript
83 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
|
|
interface ComponentCardProps {
|
|
title: string
|
|
desc: string
|
|
href: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
const cardStyle: React.CSSProperties = {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
border: '1px solid #e8e8e8',
|
|
borderRadius: 8,
|
|
textDecoration: 'none',
|
|
color: 'inherit',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
background: '#fff',
|
|
overflow: 'hidden',
|
|
}
|
|
|
|
const previewStyle: React.CSSProperties = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '28px 16px 20px',
|
|
background: '#fafafa',
|
|
minHeight: 72,
|
|
borderBottom: '1px solid #f0f0f0',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
}
|
|
|
|
const infoStyle: React.CSSProperties = {
|
|
padding: '14px 16px',
|
|
flex: 1,
|
|
}
|
|
|
|
const titleStyle: React.CSSProperties = {
|
|
fontWeight: 500,
|
|
fontSize: 14,
|
|
color: 'rgba(0, 0, 0, 0.88)',
|
|
marginBottom: 2,
|
|
}
|
|
|
|
const descStyle: React.CSSProperties = {
|
|
fontSize: 12,
|
|
color: 'rgba(0, 0, 0, 0.45)',
|
|
lineHeight: 1.4,
|
|
}
|
|
|
|
export const ComponentCard: React.FC<ComponentCardProps> = ({ title, desc, href, children }) => {
|
|
const [hovered, setHovered] = React.useState(false)
|
|
|
|
const currentStyle: React.CSSProperties = {
|
|
...cardStyle,
|
|
...(hovered
|
|
? {
|
|
borderColor: '#1890ff',
|
|
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)',
|
|
transform: 'translateY(-2px)',
|
|
}
|
|
: {}),
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
style={currentStyle}
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
>
|
|
<div style={previewStyle}>{children}</div>
|
|
<div style={infoStyle}>
|
|
<div style={titleStyle}>{title}</div>
|
|
<div style={descStyle}>{desc}</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default ComponentCard
|