|
1 | 1 | import{useTheme}from"@emotion/react";
|
2 | 2 | importCircularProgressfrom"@mui/material/CircularProgress";
|
3 | 3 | importTooltipfrom"@mui/material/Tooltip";
|
4 |
| -import{visuallyHidden}from"@mui/utils"; |
5 | 4 | import{Abbr}from"components/Abbr/Abbr";
|
6 | 5 | import{CircleHelpIcon}from"lucide-react";
|
7 | 6 | importtype{FC}from"react";
|
| 7 | +import{cn}from"utils/cn"; |
8 | 8 | import{getLatencyColor}from"utils/latency";
|
9 | 9 |
|
10 | 10 | interfaceLatencyProps{
|
11 | 11 | latency?:number;
|
12 | 12 | isLoading?:boolean;
|
13 |
| -size?:number; |
| 13 | +className?:string; |
| 14 | +iconClassName?:string; |
14 | 15 | }
|
15 | 16 |
|
16 | 17 | exportconstLatency:FC<LatencyProps>=({
|
17 | 18 | latency,
|
18 | 19 | isLoading,
|
19 |
| -size=14, |
| 20 | +className, |
| 21 | +iconClassName, |
20 | 22 | })=>{
|
21 | 23 | consttheme=useTheme();
|
22 | 24 | // Always use the no latency color for loading.
|
23 | 25 | constcolor=getLatencyColor(theme,isLoading ?undefined :latency);
|
24 | 26 |
|
25 | 27 | if(isLoading){
|
26 | 28 | return(
|
27 |
| -<Tooltiptitle="Loading latency..."> |
28 |
| -<CircularProgresssize={size}className="ml-auto"style={{ color}}/> |
| 29 | +<Tooltiptitle="Loading latency..."className={className}> |
| 30 | +<CircularProgress |
| 31 | +className={cn("!size-icon-xs",iconClassName)} |
| 32 | +style={{ color}} |
| 33 | +/> |
29 | 34 | </Tooltip>
|
30 | 35 | );
|
31 | 36 | }
|
32 | 37 |
|
33 | 38 | if(!latency){
|
34 |
| -constnotAvailableText="Latency not available"; |
35 | 39 | return(
|
36 |
| -<Tooltiptitle={notAvailableText}> |
37 |
| -<> |
38 |
| -<spancss={{ ...visuallyHidden}}>{notAvailableText}</span> |
39 |
| - |
40 |
| -<CircleHelpIconclassName="ml-auto size-icon-sm"style={{ color}}/> |
41 |
| -</> |
| 40 | +<Tooltiptitle="Latency not available"className={className}> |
| 41 | +<CircleHelpIcon |
| 42 | +className={cn("!size-icon-sm",iconClassName)} |
| 43 | +style={{ color}} |
| 44 | +/> |
42 | 45 | </Tooltip>
|
43 | 46 | );
|
44 | 47 | }
|
45 | 48 |
|
46 | 49 | return(
|
47 |
| -<divclassName="ml-autotext-sm"style={{ color}}> |
48 |
| -<spancss={{ ...visuallyHidden}}>Latency:</span> |
| 50 | +<divclassName={cn("text-sm",className)}style={{ color}}> |
| 51 | +<spanclassName="sr-only">Latency:</span> |
49 | 52 | {latency.toFixed(0)}
|
50 | 53 | <Abbrtitle="milliseconds">ms</Abbr>
|
51 | 54 | </div>
|
|