Timer UI

[alys28]

Summary

This pull request introduces a complete overhaul of the Stopwatch UI and functionality. It includes the implementation of the StopWatchButton component, the stopwatch display, lap time recording, and all associated logic and styling.

Changes

• Added StopWatchButton component in StopWatchButton.tsx for user interactions like start, stop, pause, reset, and lap recording.
• Developed StopWatch component in StopWatch.tsx, integrating the stopwatch logic and state management using React hooks.
• Implemented LapsList component in LapsList.tsx to display recorded lap times.
• Included TypeScript interfaces ButtonProps, LapsProps, and LapsEntryProps for type-checking and enhancing code readability and maintainability.
• The stopwatch state is managed using custom states like begin, running, paused, and stopped to control the flow and functionality.

Impact

• This update introduces a complete, standalone stopwatch feature that can be integrated into various parts of the application.
• Enhances user experience with a clear, intuitive interface and responsive interactions.
• The modular design of the components ensures reusability and easier maintenance.

Testing

• 5/5 in my unit testing module
• Ensured that the UI maintains layout integrity and responsiveness across different device sizes.