@parkassist/pa-ui-library
Version:
INX Platform elements
30 lines • 761 B
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import Palette from '../../constants/Palette';
import styled from 'styled-components';
import { Row } from '../Layout/Flex';
const Step = styled.div`
height: 8px;
width: 8px;
border-radius: 8px;
background: ${({
active
}) => active ? Palette.LIGHT_BLACK : Palette.WHITE_SMOKE};
border: ${({
active
}) => active ? `1px solid ${Palette.LIGHT_BLACK}` : `1px solid ${Palette.VERY_LIGHT_GREY_NEW}`};
`;
function StepsIndicator({
stepsLength,
activeStep
}) {
return _jsx(Row, {
style: {
gap: 6
},
children: Array(stepsLength).fill('').map((_, index) => _jsx(Step, {
active: activeStep === index + 1
}, index))
});
}
export default StepsIndicator;