color progress bar based on prior criteria used

src/assets/styles/player.css

@@ -104,7 +104,7 @@ body {
 }
 
 /* Music bar and progress */
-.music-bar {
+/* .music-bar {
   background: #efefef;
   stroke-width: 1;
   height: 8px;
@@ -117,7 +117,7 @@ body {
   background: #2196F3;
   height: 100%;
   transition: width linear 200ms;
-}
+} */
 
 /* Time display */
 .music-time {

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 className="w-full h-2 rounded bg-neutral-300 dark:bg-neutral-700 overflow-hidden">
-              <div id="length" style={{ width: `${progress}%` }}></div>
+  <div
+    className={`h-full transition-all duration-200 ${progressColorClass}`}
+    style={{ width: `${progress}%` }}
+  ></div>
 </div>
+
+
+
+
             <div className="music-control">
               <div
                 className="music-control__play"