44 lines
1001 B
TypeScript
44 lines
1001 B
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface TelemetryLineProps {
|
|
color?: 'primary' | 'aqua' | 'amber' | 'green' | 'red';
|
|
height?: number | string;
|
|
animate?: boolean;
|
|
opacity?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function TelemetryLine({
|
|
color = 'primary',
|
|
height = '2px',
|
|
animate = false,
|
|
opacity = 1,
|
|
className = ''
|
|
}: TelemetryLineProps) {
|
|
const colorMap = {
|
|
primary: 'bg-primary-accent',
|
|
aqua: 'bg-telemetry-aqua',
|
|
amber: 'bg-warning-amber',
|
|
green: 'bg-success-green',
|
|
red: 'bg-critical-red',
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
height={height}
|
|
fullWidth
|
|
className={`${colorMap[color]} ${animate ? 'animate-pulse' : ''} ${className}`}
|
|
style={{
|
|
opacity,
|
|
boxShadow: `0 0 8px ${
|
|
color === 'primary' ? '#198CFF' :
|
|
color === 'aqua' ? '#4ED4E0' :
|
|
color === 'amber' ? '#FFBE4D' :
|
|
color === 'green' ? '#6FE37A' : '#E35C5C'
|
|
}4D`
|
|
}}
|
|
/>
|
|
);
|
|
}
|