import React, { Component } from 'react'; import { Typography } from '@material-ui/core'; class Beranda extends Component { render() { return ( <div style={{ flex: 1 }}> <div style={{ height: 150, width: '100%', padding: 20 }} className={"main-color"}> <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography> <Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography> </div> <div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ display: 'flex' }}> <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Budget - 2021 (0/7)</Typography> <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Laporan Bulanan - Oct 2020 (1/7)</Typography> <Typography style={{ color: '#51c6ea', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Rolling Outlook - Oct 2020 (0/5)</Typography> <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline' }}>Lainnya</Typography> </div> </div> <div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ display: 'flex' }}> <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25, padding: 16 }}> <Typography style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>BALANCE SHEET</Typography> </div> <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}> </div> </div> <div style={{ display: 'flex', marginTop: 25 }}> <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25 }}> </div> <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}> </div> </div> </div> </div> ); } } export default Beranda;