ui: Build a visual Slippage Tolerance indicator bar

[AlAfiz]

Description

Simply displaying "Slippage: 1.5%" in text isn't intuitive enough for beginner DeFi users.
We need a visual indicator bar (similar to a password strength meter) that fills up and changes color based on the slippage setting.
If the slippage is low, the bar should be small and green. If it's dangerously high, the bar should fill up and turn bright red.
This translates complex financial mechanics into universally understood visual cues.

Requirements

• Create a SlippageIndicator.tsx component that accepts a slippageValue number prop.
• Build a thin, rounded div that acts as the background track (bg-slate-800).
• Inside it, build a fill div whose width percentage is tied to the slippage value (capped at 100%).
• Apply conditional Tailwind background colors to the fill: Green (< 1%), Yellow (1-5%), Red (> 5%).