31 lines
665 B
TypeScript
Executable file
31 lines
665 B
TypeScript
Executable file
/**
|
|
* CompletionBar Component
|
|
*
|
|
* Displays profile completion percentage based on critical fields.
|
|
*/
|
|
|
|
|
|
import type { FC } from 'react';
|
|
import {
|
|
CompletionBar as StyledCompletionBar,
|
|
CompletionText,
|
|
CompletionTrack,
|
|
CompletionFill,
|
|
} from './styles';
|
|
|
|
export interface CompletionBarProps {
|
|
percentage: number;
|
|
}
|
|
|
|
export const CompletionBar: FC<CompletionBarProps> = ({ percentage }) => {
|
|
return (
|
|
<StyledCompletionBar>
|
|
<CompletionText>
|
|
Profile completion: {percentage}%
|
|
</CompletionText>
|
|
<CompletionTrack>
|
|
<CompletionFill $percentage={percentage} />
|
|
</CompletionTrack>
|
|
</StyledCompletionBar>
|
|
);
|
|
};
|