return (
    <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center p-4">
      <div className="w-full max-w-3xl space-y-6">
        {/* Connection Section */}
        <div className="bg-gray-800 p-4 sm:p-6 rounded-lg shadow-lg">
          <h1 className="text-2xl font-bold mb-4">Send Files & Messages</h1>
          <div className="flex flex-col sm:flex-row sm:items-center sm:gap-4 space-y-4 sm:space-y-0">
            <input
              type="text"
              value={receiverId}
              onChange={(e) => setReceiverId(e.target.value)}
              placeholder="Enter receiver's peer ID"
              className="w-full sm:flex-1 p-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              onKeyDown={(e) => e.key === 'Enter' && handleConnect()}
            />
            <button
              onClick={handleConnect}
              className="w-full sm:w-auto px-4 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
            >
              Connect
            </button>
            <div className="w-full sm:w-auto">
              <QRScanner onScan={(data) => setReceiverId(data)} />
            </div>
          </div>
          <div className="mt-4 text-sm">
            Your ID: <span className="font-mono break-all">{peer}</span>
          </div>
          <div className="mt-2 text-sm">
            Status: <span className={`font-mono ${getStatusColor()}`}>{connected}</span>
          </div>
          {statusMessage && (
            <div
              className={`mt-2 text-sm ${
                statusMessage.includes("sent") || statusMessage.includes("Message sent")
                  ? "text-green-500"
                  : "text-red-500"
              }`}
            >
              {statusMessage}
            </div>
          )}
        </div>
  
        {/* Text and File Input Sections */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Text Message Section */}
          <div className="bg-gray-800 p-4 sm:p-6 rounded-lg shadow-lg">
            <h2 className="text-lg font-semibold mb-4">Send Text Message</h2>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={handleKeyPress}
              placeholder="Type your message (Ctrl+Enter to send)"
              rows={4}
              className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
            />
            <button
              onClick={sendTextMessage}
              disabled={!message.trim() || !connectionRef.current}
              className="mt-4 w-full px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg transition-colors"
            >
              Send Message
            </button>
          </div>
  
          {/* File Input Section */}
          <div className="bg-gray-800 p-4 sm:p-6 rounded-lg shadow-lg">
            <h2 className="text-lg font-semibold mb-4">Send File</h2>
            <input
              type="file"
              onChange={(e) => setFile(e.target.files[0])}
              className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-indigo-600 file:text-white hover:file:bg-indigo-700"
            />
            {file && (
              <div className="mt-3 p-3 bg-gray-700 rounded-lg">
                <p className="text-sm text-gray-300">Selected: {file.name}</p>
                <p className="text-xs text-gray-400">Size: {formatFileSize(file.size)}</p>
              </div>
            )}
            {progress > 0 && (
              <div className="mt-3">
                <div className="w-full bg-gray-600 rounded-full h-2.5">
                  <div
                    className="bg-indigo-600 h-2.5 rounded-full"
                    style={{ width: `${progress}%` }}
                  ></div>
                </div>
                <p className="text-xs text-gray-400 mt-1">
                  Progress: {progress.toFixed(2)}%
                </p>
              </div>
            )}
            <button
              onClick={sendFile}
              disabled={!file || !connectionRef.current}
              className="mt-4 w-full px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg transition-colors"
            >
              Send File
            </button>
          </div>
        </div>
      </div>
    </div>
  );

modify this code so that it utilises the space well similar to the code below

    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white p-4">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
            Receive Files & Messages
          </h1>
        </div>
  
        {/* Main Content Grid */}
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 h-full">
          
          {/* Left Column - ID and QR */}
          <div className="xl:col-span-1 space-y-6">
            {/* ID Section */}
            <div className="bg-gray-800/80 backdrop-blur-sm border border-gray-700/50 p-6 rounded-xl shadow-2xl">
              <div className="text-center space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-3">Your ID</label>
                  <div className="flex items-center justify-center gap-3">
                    <input
                      type="text"
                      value={peer}
                      readOnly
                      className="w-24 p-3 bg-gray-700/50 border border-gray-600/50 rounded-lg text-gray-200 font-mono text-2xl font-bold text-center"
                    />
                    <button
                      onClick={() => copyText(peer, setCopyStatus)}
                      className="px-4 py-3 bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 rounded-lg transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:scale-105"
                    >
                      {copyStatus || "Copy"}
                    </button>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Status</label>
                  <span
                    className={`font-mono text-sm px-4 py-2 rounded-lg inline-block ${
                      connectionStatus.includes("Connected by")
                        ? "text-green-400 bg-green-900/30 border border-green-500/30"
                        : connectionStatus.includes("failed")
                        ? "text-red-400 bg-red-900/30 border border-red-500/30"
                        : "text-gray-400 bg-gray-700/30 border border-gray-500/30"
                    }`}
                  >
                    {connectionStatus}
                  </span>
                </div>
              </div>
            </div>
  
            {peer && peer !== '....' && (
              <div className="bg-gray-800/80 backdrop-blur-sm border border-gray-700/50 p-8 rounded-xl shadow-2xl">
                <div className="bg-white p-6 rounded-xl mx-auto" style={{ width: 'fit-content' }}>
                  <QRCode
                    size={256}
                    style={{ height: "auto", maxWidth: "100%", width: "100%" }}
                    value={peer}
                    viewBox={`0 0 256 256`}
                    level={'L'}
                    className="block"
                    width={300}
                    height={300}
                  />
                </div>
              </div>
            )}
          </div>
  
          {/* Right Column - Messages and Files */}
          <div className="xl:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6 h-full">
            
            {/* Messages Section */}
            <div className="bg-gray-800/80 backdrop-blur-sm border border-gray-700/50 p-6 rounded-xl shadow-2xl flex flex-col">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold text-gray-100">Messages</h2>
                {message && (
                  <button
                    onClick={() => copyText(message, setMessageCopyStatus)}
                    className="px-4 py-2 bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 rounded-lg text-sm transition-all duration-200 font-medium shadow-md hover:shadow-lg transform hover:scale-105"
                  >
                    {messageCopyStatus || "Copy"}
                  </button>
                )}
              </div>
              
              <div className="bg-gray-700/50 border border-gray-600/50 rounded-lg p-4 flex-1 overflow-y-auto">
                {message ? (
                  <p className="text-gray-200 break-words leading-relaxed">{message}</p>
                ) : (
                  <div className="flex items-center justify-center h-full">
                    <p className="text-gray-500 text-center">No messages received yet</p>
                  </div>
                )}
              </div>
            </div>
  
            {/* Files Section */}
            <div className="bg-gray-800/80 backdrop-blur-sm border border-gray-700/50 p-6 rounded-xl shadow-2xl flex flex-col">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold text-gray-100 flex items-center gap-2">
                  Files
                  <span className="px-2 py-1 bg-indigo-600/30 text-indigo-400 rounded-full text-sm font-medium border border-indigo-500/30">
                    {files.length}
                  </span>
                </h2>
              </div>
              
              <div className="bg-gray-700/50 border border-gray-600/50 rounded-lg p-4 flex-1 overflow-y-auto">
                {files.length > 0 || Object.keys(receiveProgress).length > 0 ? (
                  <div className="space-y-3">
                    {/* Progress indicators for receiving files */}
                    {Object.keys(receiveProgress).map((fileId) => (
                      <div key={fileId} className="bg-gray-600/50 border border-gray-500/30 rounded-lg p-4">
                        <div className="flex items-center justify-between mb-3">
                          <p className="text-sm font-medium text-gray-200 truncate flex-1 mr-3">
                            Receiving: {pendingFiles.current[fileId]?.name || 'Unknown file'}
                          </p>
                          <span className="text-xs text-indigo-400 font-mono bg-indigo-900/30 px-2 py-1 rounded">
                            {receiveProgress[fileId].toFixed(1)}%
                          </span>
                        </div>
                        <div className="w-full bg-gray-600 rounded-full h-2.5">
                          <div
                            className="bg-gradient-to-r from-indigo-500 to-purple-500 h-2.5 rounded-full transition-all duration-300"
                            style={{ width: `${receiveProgress[fileId]}%` }}
                          ></div>
                        </div>
                      </div>
                    ))}
                    
                    {/* Received files */}
                    {files.map((file, index) => (
                      <div key={index} className="bg-gray-600/50 border border-gray-500/30 rounded-lg p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex-1 min-w-0 mr-3">
                            <p className="text-sm font-medium text-gray-200 truncate mb-1">
                              {file.name}
                            </p>
                            <p className="text-xs text-gray-400 bg-gray-700/50 px-2 py-1 rounded inline-block">
                              {formatFileSize(file.size)}
                            </p>
                          </div>
                          <button
                            onClick={() => downloadFile(file)}
                            className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 rounded-lg text-sm transition-all duration-200 font-medium shadow-md hover:shadow-lg transform hover:scale-105 flex-shrink-0"
                          >
                            Download
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="flex items-center justify-center h-full">
                    <p className="text-gray-500 text-center">No files received yet</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );