53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
|
|
const JtlRenderer = (params) => {
|
|
const hasJTL = params.value;
|
|
|
|
// Handle undefined state (database unavailable)
|
|
if (hasJTL === undefined) {
|
|
return (
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
|
|
<div style={{
|
|
width: '12px',
|
|
height: '12px',
|
|
borderRadius: '50%',
|
|
backgroundColor: '#fff3cd',
|
|
border: '1px solid #ffc107',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '8px',
|
|
color: '#856404',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
?
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const backgroundColor = hasJTL ? '#388e3c' : '#f5f5f5';
|
|
const border = hasJTL ? 'none' : '1px solid #ccc';
|
|
|
|
return (
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
|
|
<div style={{
|
|
width: '12px',
|
|
height: '12px',
|
|
borderRadius: '50%',
|
|
backgroundColor: backgroundColor,
|
|
border: border,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '8px',
|
|
color: 'white',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
{hasJTL && '✓'}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JtlRenderer;
|