|
|
import React, { useEffect, useState } from 'react';
|
|
|
import styles from './style/compCard.module.less';
|
|
|
import { compData } from '@/pages/componentMarket/test/data';
|
|
|
import { Card, Grid, Rate, Typography } from '@arco-design/web-react';
|
|
|
|
|
|
const { Row, Col } = Grid;
|
|
|
|
|
|
interface CompCardProps {
|
|
|
componentClassify: string;
|
|
|
}
|
|
|
|
|
|
const CompCard: React.FC<CompCardProps> = ({ componentClassify }) => {
|
|
|
const [componentClassifyData, setComponentClassifyData] = useState<any>([]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (componentClassify === '全部') setComponentClassifyData(compData);
|
|
|
else {
|
|
|
const filterData = compData.filter(v => v.componentClassify === componentClassify);
|
|
|
setComponentClassifyData(filterData || []);
|
|
|
}
|
|
|
}, [componentClassify]);
|
|
|
|
|
|
return (
|
|
|
<div className={styles['comp-card']}>
|
|
|
<Row style={{ marginBottom: 16 }}>
|
|
|
{componentClassifyData.map((v, i) => {
|
|
|
return (
|
|
|
<Col
|
|
|
xs={12}
|
|
|
sm={12}
|
|
|
md={12}
|
|
|
lg={6}
|
|
|
xl={6}
|
|
|
xxl={6}
|
|
|
key={i}>
|
|
|
<Card style={{ border: '1px solid #d9d9d9' }}>
|
|
|
{/*左侧图片*/}
|
|
|
<div className={styles['img-box']}>图片</div>
|
|
|
{/*右侧数据*/}
|
|
|
<div className={styles['info-box']}>
|
|
|
<div className={styles['info-title']}>{v.name}</div>
|
|
|
<div className={styles['info-author']}>{v.identifier}</div>
|
|
|
<div className={styles['info-score']}>
|
|
|
<div>组件评分：</div>
|
|
|
<Rate readonly allowHalf value={v.star < 0 ? 5 : v.star} />
|
|
|
<Typography.Text
|
|
|
style={{
|
|
|
margin: '0 5px'
|
|
|
}}
|
|
|
>
|
|
|
{v.star < 0 ? 5 : v.star}分
|
|
|
</Typography.Text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Card>
|
|
|
<div className={styles['comp-card-footer']}>
|
|
|
<div className={styles['comp-type']}>{v.componentClassify}</div>
|
|
|
<div className={styles['comp-language']}>{v.deployType}</div>
|
|
|
</div>
|
|
|
</Col>
|
|
|
);
|
|
|
})}
|
|
|
</Row>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default CompCard; |