35 lines
922 B
TypeScript
35 lines
922 B
TypeScript
|
import { styled } from '@mui/styles';
|
||
|
|
import { Description } from './Detail';
|
||
|
|
|
||
|
|
const RunningTimeSection = styled('div')(() => ({
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
}));
|
||
|
|
|
||
|
|
const StatusSign = styled('span')(() => ({
|
||
|
|
width: '10px',
|
||
|
|
height: '10px',
|
||
|
|
display: 'block',
|
||
|
|
backgroundColor: 'rgb(113, 218, 113)',
|
||
|
|
borderRadius: '50%',
|
||
|
|
marginRight: '5px',
|
||
|
|
}));
|
||
|
|
|
||
|
|
export default function RunningTime({ seconds }: { seconds: number }) {
|
||
|
|
const day = Math.floor(seconds / (60 * 60 * 24));
|
||
|
|
const hour = Math.floor((seconds % (60 * 60 * 24)) / 3600);
|
||
|
|
const min = Math.floor(((seconds % (60 * 60 * 24)) % 3600) / 60);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<RunningTimeSection>
|
||
|
|
<StatusSign />
|
||
|
|
<Description>
|
||
|
|
Running for
|
||
|
|
<span className="duration">{day}</span>D
|
||
|
|
<span className="duration">{hour}</span>H
|
||
|
|
<span className="duration">{min}</span>M
|
||
|
|
</Description>
|
||
|
|
</RunningTimeSection>
|
||
|
|
);
|
||
|
|
}
|