github.com/filecoin-project/bacalhau@v0.3.23-0.20230228154132-45c989550ace/dashboard/frontend/src/components/job/ShardState.tsx (about)

     1  import React, { FC, useMemo } from 'react'
     2  import { SxProps } from '@mui/system'
     3  import Box from '@mui/material/Box'
     4  import Typography from '@mui/material/Typography'
     5  
     6  const ShardState: FC<{
     7    state: string,
     8    sx?: SxProps,
     9  }> = ({
    10    state,
    11    children,
    12    sx = {},
    13  }) => {
    14    const shardState = useMemo(() => {
    15      let color = '#666'
    16      if(state == 'Error') {
    17        color = '#990000'
    18      } else if(state == 'Completed') {
    19        color = '#009900'
    20      }
    21      return (
    22        <Typography variant="caption" style={{color}} sx={{
    23          pr: 2,
    24        }}>
    25          { state }
    26        </Typography>
    27      )
    28    }, [
    29      state,
    30    ])
    31    return (
    32      <Box
    33        component="div"
    34        sx={{
    35          display: 'flex',
    36          flexDirection: 'row',
    37          alignItems: 'center',
    38          justifyContent: 'flex-start',
    39          ...sx
    40        }}
    41      >
    42        {
    43          shardState
    44        }
    45        {
    46          children
    47        }
    48      </Box>
    49    )
    50  }
    51  
    52  export default ShardState