Refactor layout and component structures for improved responsiveness; adjust padding and container classes across multiple components

components/podcast-player.tsx

@@ -12,14 +12,55 @@ import {
   Volume2,
 } from "lucide-react";
 import Image from "next/image";
-import { useState } from "react";
+import { useRef, useState, useEffect } from "react";
 
 export function PodcastPlayer() {
+  const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0); // Add duration state
+
+  // Update current time and duration as the audio plays
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const updateTime = () => setCurrentTime(audio.currentTime);
+    const updateDuration = () => setDuration(audio.duration);
+
+    audio.addEventListener("timeupdate", updateTime);
+    audio.addEventListener("loadedmetadata", updateDuration);
+
+    return () => {
+      audio.removeEventListener("timeupdate", updateTime);
+      audio.removeEventListener("loadedmetadata", updateDuration);
+    };
+  }, []);
+
+  const handlePlaying = () => {
+    if (isPlaying) {
+      audioRef.current?.pause();
+    } else {
+      audioRef.current?.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const formatTime = (time: number) => {
+    if (isNaN(time)) return "0:00"; // Handle NaN case
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  };
 
   return (
     <div className="fixed bottom-0 left-0 right-0 border-t bg-background p-4">
-      <div className="mx-auto flex max-w-7xl items-center justify-between">
+      <audio
+        src="http://webaudioapi.com/samples/audio-tag/chrono.mp3"
+        className="hidden"
+        ref={audioRef}
+      />
+      <div className="mx-auto flex container items-center justify-between">
         <div className="flex items-center gap-4">
           <Image
             src="https://picsum.photos/48"
@@ -36,18 +77,18 @@ export function PodcastPlayer() {
         <div className="flex flex-col items-center gap-1 md:w-1/2">
           <div className="flex items-center gap-2">
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <SkipBack className="h-4 w-4" />
-              <span className="sr-only">Previous</span>
+              <SkipForward className="h-4 w-4" />
+              <span className="sr-only">Next</span>
             </Button>
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <Rewind className="h-4 w-4" />
-              <span className="sr-only">Rewind</span>
+              <FastForward className="h-4 w-4" />
+              <span className="sr-only">Fast Forward</span>
             </Button>
             <Button
               variant="outline"
               size="icon"
               className="h-10 w-10 rounded-full"
-              onClick={() => setIsPlaying(!isPlaying)}
+              onClick={handlePlaying}
             >
               {isPlaying ? (
                 <Pause className="h-5 w-5" />
@@ -57,21 +98,32 @@ export function PodcastPlayer() {
               <span className="sr-only">{isPlaying ? "Pause" : "Play"}</span>
             </Button>
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <FastForward className="h-4 w-4" />
-              <span className="sr-only">Fast Forward</span>
+              <Rewind className="h-4 w-4" />
+              <span className="sr-only">Rewind</span>
             </Button>
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <SkipForward className="h-4 w-4" />
-              <span className="sr-only">Next</span>
+              <SkipBack className="h-4 w-4" />
+              <span className="sr-only">Previous</span>
             </Button>
           </div>
           <div className="flex w-full items-center gap-2">
             <div className="text-xs tabular-nums text-muted-foreground">
-              62:00
+              {formatTime(duration)} {/* Use duration state */}
             </div>
-            <Slider defaultValue={[33]} max={100} step={1} className="w-full" />
+            <Slider
+              value={[currentTime]}
+              max={duration}
+              step={1}
+              className="w-full"
+              onValueChange={(value) => {
+                if (audioRef.current) {
+                  audioRef.current.currentTime = value[0];
+                  setCurrentTime(value[0]);
+                }
+              }}
+            />
             <div className="text-xs tabular-nums text-muted-foreground">
-              12:34
+              {formatTime(currentTime)}
             </div>
           </div>
         </div>