feat: first

src/components/Steps/StepIcon.tsx

@@ -0,0 +1,24 @@
+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>
+}