github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/components/progress-pager.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  import {Box, Grid, Typography} from "@mui/material";
    20  
    21  interface ProgressPagerProps {
    22      steps: number;
    23      activeStep: number;
    24  }
    25  
    26  interface PagerBoxProps {
    27      step: number;
    28      active: boolean;
    29  }
    30  
    31  function PagerBox({step, active}: PagerBoxProps) {
    32  
    33      let backgroundColor = active ? "primary.main" : "primary.light"
    34  
    35      return (
    36          <Box p={2} bgcolor={backgroundColor} borderRadius={2}>
    37              <Typography>{step + 1}</Typography>
    38          </Box>
    39      )
    40  }
    41  
    42  export default function ProgressPager({steps, activeStep}: ProgressPagerProps) {
    43      return (
    44          <Grid container spacing={1}>
    45              {
    46                  Array.from(Array(steps).keys()).map((step) => {
    47                      return (
    48                          <Grid key={step} item>
    49                              <PagerBox step={step} active={step === activeStep}/>
    50                          </Grid>
    51                      )
    52                  })
    53              }
    54          </Grid>
    55      )
    56  }