initial commit

src/components/stepper-dot/index.tsx

@@ -0,0 +1,31 @@
+// MUI Imports
+import type { StepIconProps } from '@mui/material/StepIcon'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Style Imports
+import styles from './styles.module.css'
+
+const StepperCustomDot = (props: StepIconProps) => {
+  // Props
+  const { active, completed, error } = props
+
+  if (error) {
+    return <i className='tabler-alert-triangle-filled text-xl scale-[1.2] text-error' />
+  } else if (completed) {
+    return (
+      <div
+        className={classnames(styles.stepperCustomDot, 'flex items-center justify-center', {
+          [styles.completedStepperCustomDot]: completed
+        })}
+      >
+        <i className='tabler-check text-sm text-white' />
+      </div>
+    )
+  } else {
+    return <div className={classnames(styles.stepperCustomDot, { [styles.activeStepperCustomDot]: active })} />
+  }
+}
+
+export default StepperCustomDot

src/components/stepper-dot/styles.module.css

@@ -0,0 +1,23 @@
+.stepperCustomDot {
+  inline-size: 20px;
+  block-size: 20px;
+  border-width: 3px;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: var(--mui-palette-primary-lightOpacity);
+
+  &.activeStepperCustomDot {
+    border-width: 5px;
+    border-color: var(--mui-palette-primary-main);
+    background-color: var(--mui-palette-background-paper);
+  }
+
+  &.completedStepperCustomDot {
+    background-color: var(--mui-palette-primary-main);
+    border-color: var(--mui-palette-primary-main);
+  }
+}
+
+.errorColor {
+  color: var(--mui-palette-error-main);
+}