mira, tengo esto:

import { useState } from 'react';

interface Song {
  title: string;
  artist: string;
  duration: string;
}

const songs: Song[] = [
  { title: 'Song 1', artist: 'Artist 1', duration: '3:45' },
  { title: 'Song 2', artist: 'Artist 2', duration: '4:10' },
  { title: 'Song 3', artist: 'Artist 3', duration: '2:50' },
  { title: 'Song 4', artist: 'Artist 4', duration: '3:20' },
  { title: 'Song 5', artist: 'Artist 5', duration: '4:30' },
];

const App = () => {
  const [currentSong, setCurrentSong] = useState(songs[0]);
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlayPause = () => {
    setIsPlaying(!isPlaying);
  };

  const handleNextSong = () => {
    const currentIndex = songs.indexOf(currentSong);
    const nextIndex = (currentIndex + 1) % songs.length;
    setCurrentSong(songs[nextIndex]);
  };

  const handlePreviousSong = () => {
    const currentIndex = songs.indexOf(currentSong);
    const previousIndex = (currentIndex - 1 + songs.length) % songs.length;
    setCurrentSong(songs[previousIndex]);
  };

  return (
    <div className="bg-black h-screen w-screen text-green-500 p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">Spotify Clone</h1>
        <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
          Log out
        </button>
      </div>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-xl font-bold mb-2">Time Free</h2>
        <div className="flex justify-between items-center w-full mb-4">
          <button
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
            onClick={handlePreviousSong}
          >
            Previous
          </button>
          <button
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
            onClick={handlePlayPause}
          >
            {isPlaying ? 'Pause' : 'Play'}
          </button>
          <button
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
            onClick={handleNextSong}
          >
            Next
          </button>
        </div>
        <div className="flex flex-col justify-center items-center w-full">
          <h3 className="text-lg font-bold mb-2">{currentSong.title}</h3>
          <p className="text-md mb-2">{currentSong.artist}</p>
          <p className="text-md">{currentSong.duration}</p>
        </div>
        <div className="flex flex-col justify-center items-center w-full mt-4">
          <h2 className="text-xl font-bold mb-2">Playlist</h2>
          <ul>
            {songs.map((song, index) => (
              <li
                key={index}
                className="flex justify-between items-center w-full mb-2"
              >
                <p className="text-md">{song.title}</p>
                <p className="text-md">{song.artist}</p>
                <p className="text-md">{song.duration}</p>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;

pero necesito que implementes todo este diseño nuevo:

import { Play, SkipBack, SkipForward, Shuffle, Repeat, Laptop2, Volume1, Maximize2 } from "lucide-react"

export default function SpotifyClone() {
  return (
    <div className="flex flex-col h-screen text-gray-300 bg-black">
      {/* Top bar */}
      <div className="flex items-center justify-between p-4 bg-gray-900">
        <div className="flex items-center space-x-4">
          <div className="w-6 h-6 bg-gray-700 rounded-full"></div>
          <div className="w-6 h-6 bg-gray-700 rounded-full"></div>
        </div>
        <div className="flex-1 max-w-xl mx-4">
          <input
            type="text"
            placeholder="¿Qué quieres reproducir?"
            className="w-full px-4 py-2 text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500"
          />
        </div>
        <div className="flex items-center space-x-4">
          <div className="w-8 h-8 bg-gray-700 rounded-full"></div>
          <div className="w-8 h-8 bg-gray-700 rounded-full"></div>
          <div className="w-8 h-8 bg-green-500 rounded-full"></div>
        </div>
      </div>

      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <div className="w-64 p-4 overflow-y-auto bg-gray-900">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
            <div key={item} className="w-full h-14 mb-4 bg-gray-800 rounded"></div>
          ))}
        </div>

        {/* Main content */}
        <div className="flex-1 p-6 overflow-y-auto bg-gradient-to-b from-red-900 to-gray-900">
          <div className="flex items-center mb-6">
            <img src="/placeholder.svg?height=232&width=232" alt="Playlist cover" className="w-58 h-58 mr-6" />
            <div>
              <p className="text-sm font-medium">Playlist pública</p>
              <h1 className="text-8xl font-bold mb-4">Time Free</h1>
              <p className="text-sm">Relajao</p>
              <div className="flex items-center mt-2">
                <div className="w-6 h-6 rounded-full bg-green-500 mr-2"></div>
                <span className="text-sm">Johan Morales • 8 veces guardada • 1253 canciones, 72 h 6 min</span>
              </div>
            </div>
          </div>

          <div className="flex items-center space-x-4 mb-6">
            <button className="p-4 rounded-full bg-green-500 hover:bg-green-400">
              <Play fill="black" className="w-6 h-6 text-black" />
            </button>
            <button className="p-2 rounded-full border border-gray-700 hover:bg-gray-800">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.5 12.75L19.5 12.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M12 5.25L12 20.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <button className="text-gray-400 hover:text-white">•••</button>
          </div>

          <table className="w-full">
            <thead>
              <tr className="text-left text-sm text-gray-400 border-b border-gray-800">
                <th className="pb-2">#</th>
                <th className="pb-2">Título</th>
                <th className="pb-2">Álbum</th>
                <th className="pb-2">Fecha en que se agregó</th>
                <th className="pb-2">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 3.33337V12.6667" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M3.33331 8H12.6666" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </th>
              </tr>
            </thead>
            <tbody>
              {[
                { title: "Las Piponas (Remix)", artist: "Kris R., Blessed", album: "Las Piponas (Remix)", added: "hace 2 horas", duration: "4:04" },
                { title: "La Nueva Gerencia", artist: "Arcángel, Farruko", album: "Arca (The Mixtape)", added: "hace 1 día", duration: "4:36" },
                { title: "Secretos", artist: "C.R.O, Kidd Keo", album: "Secretos", added: "hace 1 día", duration: "2:41" },
                { title: "Lo Siento", artist: "Saigo", album: "Lo Siento", added: "hace 1 día", duration: "3:13" },
              ].map((track, index) => (
                <tr key={index} className="hover:bg-gray-800">
                  <td className="py-2">{index + 1}</td>
                  <td className="py-2">
                    <div className="flex items-center">
                      <img src="/placeholder.svg?height=40&width=40" alt="Album cover" className="w-10 h-10 mr-4" />
                      <div>
                        <p className="font-medium">{track.title}</p>
                        <p className="text-sm text-gray-400">{track.artist}</p>
                      </div>
                    </div>
                  </td>
                  <td className="py-2 text-sm text-gray-400">{track.album}</td>
                  <td className="py-2 text-sm text-gray-400">{track.added}</td>
                  <td className="py-2 text-sm text-gray-400">{track.duration}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Footer / Playback controls */}
      <div className="flex items-center justify-between p-4 bg-gray-900 border-t border-gray-800">
        <div className="flex items-center w-1/3">
          <img src="/placeholder.svg?height=56&width=56" alt="Album cover" className="w-14 h-14 mr-4" />
          <div>
            <p className="font-medium">Las Piponas (Remix)</p>
            <p className="text-sm text-gray-400">Kris R., Blessed</p>
          </div>
        </div>
        <div className="flex flex-col items-center w-1/3">
          <div className="flex items-center space-x-4 mb-2">
            <Shuffle className="w-5 h-5 text-gray-400 hover:text-white" />
            <SkipBack className="w-5 h-5 text-gray-400 hover:text-white" />
            <button className="p-2 rounded-full bg-white hover:bg-gray-200">
              <Play fill="black" className="w-6 h-6 text-black" />
            </button>
            <SkipForward className="w-5 h-5 text-gray-400 hover:text-white" />
            <Repeat className="w-5 h-5 text-gray-400 hover:text-white" />
          </div>
          <div className="flex items-center w-full">
            <span className="text-xs text-gray-400 mr-2">0:51</span>
            <div className="flex-1 h-1 bg-gray-600 rounded-full">
              <div className="w-1/4 h-1 bg-white rounded-full"></div>
            </div>
            <span className="text-xs text-gray-400 ml-2">4:04</span>
          </div>
        </div>
        <div className="flex items-center justify-end w-1/3 space-x-4">
          <Laptop2 className="w-5 h-5 text-gray-400 hover:text-white" />
          <Volume1 className="w-5 h-5 text-gray-400 hover:text-white" />
          <div className="w-24 h-1 bg-gray-600 rounded-full">
            <div className="w-1/2 h-1 bg-white rounded-full"></div>
          </div>
          <Maximize2 className="w-5 h-5 text-gray-400 hover:text-white" />
        </div>
      </div>
    </div>
  )
}