[Feature] Create Interactive Leaderboard Rank Selector

[AlotOfTypos]

User story

As a user,
I want to select different ranks from a visual, interactive menu,
so that I can easily switch between leaderboards for different skill levels.

Acceptance criteria

• A RankSelector.jsx component is created.
• The component renders a horizontal bar displaying different ranks, styled as pool balls, based on the design in Figma.
• When a user clicks on a rank (pool ball), it smoothly animates ("rolls") to a designated "selected" spot on the bar.
  • You can decide whether you think the pool ball remains in the selection 'bar' or not
• The previously selected ball animates back to its original position.
• When a rank is selected, the component communicates the change to its parent page (e.g., via a callback function).
• The component is fully responsive and matches the Figma design on all screen sizes.

Definition of done

• Acceptance criteria met
• Agreed tests written
• PR reviewed
• Merged into the main/feature branch

Notes

• Please refer to the pool balls in the Design Aspect page on figma
  Possibly could do this too if you want to

• The component must support a versatile number of ranks, passed in as a prop.
  • As of currently go with what is on the figma done (6 pool balls)
  • The LOWEST (Beginners) should always be the White pool ball, and HIGHEST should always be the Black pool ball
  • There should only be a few options,
    • 3 Pool Balls (Beginners, Intermediate, Advance), Intermediate can use the Blue pool ball
    • 6 Pool Balls (default)
    • 9 Pool Balls, this ones less likely to be used, go up to rank based on the number the pool ball colours correspond to. (I know striped are different colours... just focus on the colours I think)