go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/common/components/timeline/bottom_label.tsx (about)

     1  // Copyright 2024 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { useTheme } from '@mui/material';
    16  
    17  import { BOTTOM_AXIS_HEIGHT, TEXT_HEIGHT, TEXT_MARGIN } from './constants';
    18  import { useTimelineConfig } from './context';
    19  
    20  export interface BottomLabelProps {
    21    readonly label: string;
    22  }
    23  
    24  export function BottomLabel({ label }: BottomLabelProps) {
    25    const theme = useTheme();
    26    const config = useTimelineConfig();
    27  
    28    return (
    29      <svg
    30        width={config.sidePanelWidth}
    31        height={BOTTOM_AXIS_HEIGHT}
    32        css={{
    33          gridArea: 'bottom-label',
    34          position: 'sticky',
    35          bottom: 0,
    36          left: 0,
    37          backgroundColor: theme.palette.background.default,
    38          zIndex: 2,
    39        }}
    40      >
    41        <text x={TEXT_MARGIN} y={TEXT_HEIGHT + TEXT_MARGIN / 2} fontWeight={500}>
    42          {label}
    43        </text>
    44        <path
    45          d={`m-0.5,0.5h${config.sidePanelWidth}m0,0v${BOTTOM_AXIS_HEIGHT}`}
    46          stroke="currentcolor"
    47        />
    48      </svg>
    49    );
    50  }