97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
|
import React from 'react';
|
||
|
|
|
||
|
|
const titleSize = 28;
|
||
|
|
|
||
|
|
function Card(props) {
|
||
|
|
const {
|
||
|
|
full = true,
|
||
|
|
title,
|
||
|
|
titleSpace,
|
||
|
|
overVisible,
|
||
|
|
padding,
|
||
|
|
withBorder = true,
|
||
|
|
withBg = "rgba(6,36,109,0.80)"
|
||
|
|
} = props;
|
||
|
|
return (
|
||
|
|
<div className={'screen-card'}>
|
||
|
|
{title && <div className="screen-card-title">
|
||
|
|
{title}
|
||
|
|
</div>}
|
||
|
|
<div className="screen-card-content">
|
||
|
|
<div className="box">
|
||
|
|
{React.Children.map(props.children, item => item)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style jsx>{`
|
||
|
|
.screen-card {
|
||
|
|
background: ${withBg ? withBg : 'transparent'};
|
||
|
|
border: 2px solid ${withBorder ? '#0072EE' : 'transparent'};
|
||
|
|
border-radius: 8px;
|
||
|
|
position: relative;
|
||
|
|
color: white;
|
||
|
|
height: ${full ? "100%" : "unset"}
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-title {
|
||
|
|
background: #0072EE;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: ${titleSize}px;
|
||
|
|
padding: 0 10px;
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-title:after {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
width: 10px;
|
||
|
|
height: ${titleSize}px;
|
||
|
|
position: absolute;
|
||
|
|
right: -10px;
|
||
|
|
bottom: 0;
|
||
|
|
border-color: transparent;
|
||
|
|
border-top-color: #0072EE;
|
||
|
|
border-left-color: #0072EE;
|
||
|
|
border-width: 14px 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-content {
|
||
|
|
overflow: ${overVisible ? "visible" : "auto"};
|
||
|
|
padding-top: ${titleSpace ? titleSize : 0}px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-content > .box {
|
||
|
|
padding: ${padding ? padding : "unset"};
|
||
|
|
min-height: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-content::-webkit-scrollbar {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-content::-webkit-scrollbar-track {
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-content::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 10px;
|
||
|
|
-webkit-box-shadow: inset 0 0 0 4px #092062;
|
||
|
|
background-color: #0072EE;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-card-content::-webkit-scrollbar-corner {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Card;
|