78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { createStyles } from 'antd-style';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
const SimpleCardItemWrapper = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
const useStyles = createStyles(({ css, token }) => ({
|
|
wrapper: css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: ${token.colorBgContainer};
|
|
border-radius: ${token.borderRadius}px;
|
|
padding: ${token.padding}px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: ${token.padding}px;
|
|
&.bordered {
|
|
border: 1px solid ${token.colorBorder};
|
|
}
|
|
.title {
|
|
font-size: ${token.fontSize}px;
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.content {
|
|
font-size: ${token.fontSize}px;
|
|
color: ${token.colorTextSecondary};
|
|
}
|
|
`
|
|
}));
|
|
export const SimpleCardItem: React.FC<{
|
|
title?: string;
|
|
content?: React.ReactNode;
|
|
style?: React.CSSProperties;
|
|
bordered?: boolean;
|
|
}> = (props) => {
|
|
const { styles, cx } = useStyles();
|
|
|
|
const { title, content, style, bordered } = props;
|
|
|
|
return (
|
|
<div className={cx({ bordered: bordered }, styles.wrapper)} style={style}>
|
|
<div className="title">{title}</div>
|
|
<div className="content">{content}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const SimpleCard: React.FC<{
|
|
dataList: { label: string; value: React.ReactNode }[];
|
|
height?: string | number;
|
|
bordered?: boolean;
|
|
}> = (props) => {
|
|
const { dataList, bordered } = props;
|
|
|
|
return (
|
|
<SimpleCardItemWrapper style={{ height: props.height || '100%' }}>
|
|
{dataList.map((item, index) => (
|
|
<SimpleCardItem
|
|
key={index}
|
|
title={item.label}
|
|
content={item.value}
|
|
bordered={bordered}
|
|
></SimpleCardItem>
|
|
))}
|
|
</SimpleCardItemWrapper>
|
|
);
|
|
};
|