77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
// import PropTypes from "prop-types"
|
|
// import styled from 'styled-components';
|
|
// import '../DataBase/DummyDBWinLoss.js'
|
|
// import '../DataBase/DataProfileUser.js'
|
|
import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js';
|
|
import '../styles/Win_Loss.css'
|
|
import { UserProfile } from '../DataBase/DataUserProfile';
|
|
// import color from '../../utils/style/color.js';
|
|
|
|
|
|
|
|
// const CardWrapper = styled.div`
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// padding: 15px;
|
|
// background-color: black;
|
|
// border-radius: 30px;
|
|
// width: 350px;
|
|
// transition: 200ms;
|
|
// margin-top: 50px;
|
|
// &:hover {
|
|
// cursor: pointer;
|
|
// box-shadow: 2px 2px 10px #b6b6b6;
|
|
// }
|
|
// `
|
|
|
|
// const CardLabel1 = styled.h1`
|
|
// color: #5843e4;
|
|
// // font-size: 22px;
|
|
// font-weight: bold;
|
|
// margin-bottom: 25px;
|
|
// `
|
|
// const CardLabel2 = styled.span`
|
|
// color: #5843e4;
|
|
// font-size: 22px;
|
|
// font-weight: bold;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// `
|
|
|
|
// const CardImage = styled.img`
|
|
// heigh: 80px;
|
|
// width: 80px;
|
|
// border-radius: 50%;
|
|
// `
|
|
|
|
function WinLoss() {
|
|
return (
|
|
|
|
<div className='tab'>
|
|
<h1 className='title'>Match history Win/Loss</h1>
|
|
<div className='scroll'>
|
|
{DBWinLoss.map((item, index) => {
|
|
return (
|
|
<div className='elements'>
|
|
<li key={index}>
|
|
<h4 className='content'>{item.title}</h4>
|
|
<div className='content2nd'>
|
|
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score} {item.openent}</h4>
|
|
</div>
|
|
{/* <h4 className='content'>{item.openent}</h4> */}
|
|
</li>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Card.propTypes = {
|
|
// label: PropTypes.string,
|
|
// title: PropTypes.string.isRequired,
|
|
// picture: PropTypes.string,
|
|
// }
|
|
|
|
export default WinLoss |