color progress bar based on prior criteria used

src/components/AudioPlayer.jsx

@@ -169,6 +169,16 @@ useEffect(() => {
     };
   }, [activeStation]);
 
+const remaining = duration - elapsed;
+
+const progressColorClass =
+  progress >= 90
+    ? "bg-red-500 dark:bg-red-400"
+    : progress >= 75 || remaining <= 20
+    ? "bg-yellow-400 dark:bg-yellow-300"
+    : "bg-blue-500 dark:bg-blue-400";
+
+
   return (
     <>
       <div className="station-tabs flex gap-2 justify-center mb-4 flex-wrap z-10 relative">
@@ -202,9 +212,16 @@ useEffect(() => {
               <p className="music-time__current">{formatTime(elapsed)}</p>
               <p className="music-time__last">{formatTime(duration - elapsed)}</p>
             </div>
-            <div className="music-bar" id="progress">
-              <div id="length" style={{ width: `${progress}%` }}></div>
-            </div>
+<div className="w-full h-2 rounded bg-neutral-300 dark:bg-neutral-700 overflow-hidden">
+  <div
+    className={`h-full transition-all duration-200 ${progressColorClass}`}
+    style={{ width: `${progress}%` }}
+  ></div>
+</div>
+
+
+
+
             <div className="music-control">
               <div
                 className="music-control__play"