25 lines
753 B
TypeScript
25 lines
753 B
TypeScript
import React, { FC, PropsWithChildren } from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
const StyledStepIcon = styled.div<{ $active?: boolean }>`
|
|
background: ${props => props.$active ? '#FFAB83' : '#FFFFFF'};
|
|
border: 1px solid ${props => props.$active ? '#FFAB83' : '#FF5200'};
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 8px;
|
|
font-size: 12px;
|
|
color: #1E1D1F;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
transition: background-color .3s, border-color .3s;
|
|
`
|
|
|
|
export const StepIcon: FC<PropsWithChildren<{ active: boolean }>> = ({ children, active }) => {
|
|
return <StyledStepIcon $active={active}>{children}</StyledStepIcon>
|
|
}
|