<h2 className="text-xl font-bold mb-4">
        {datasetName
          ? (
            <>
              <span className="text-gray-700">{datasetName}</span>
              <span className="ml-2">Locations</span>
            </>
          )
          : (
            "Locations"
          )}
      </h2>

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">
          Locations
        </h2>
        {datasetName && (
          <div className="text-gray-600 text-sm flex items-center">
            {datasetName}
          </div>
        )}
      </div>

              <div className="flex justify-between">
                <div>
                  <button
                    onClick={handleBackToLocations}
                    className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"
                  >
                    <span className="mr-1">←</span> Locations
                  </button>
                </div>
                <div>
                  <button
                    onClick={handleBackToDatasets}
                    className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 flex items-center"
                  >
                    <span className="mr-1">↑</span> Datasets
                  </button>
                </div>

              <div className="flex">
                <button
                  onClick={handleBackToLocations}
                  className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center mr-2"
                >
                  <span className="mr-1">←</span> Locations
                </button>
                <button
                  onClick={handleBackToDatasets}
                  className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 flex items-center"
                >
                  <span className="mr-1">↑</span> Datasets
                </button>

              <div className="flex justify-between mt-3">
                <div>
                  <button
                    onClick={handleBackToLocations}
                    className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md"
                  >
                    Locations
                  </button>
                </div>
                <div>
                  <button
                    onClick={handleBackToDatasets}
                    className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
                  >
                    ↑ Datasets
                  </button>
                </div>

              <div className="flex mt-3">
                <button
                  onClick={handleBackToLocations}
                  className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md mr-2"
                >
                  <span className="mr-1">←</span> Locations
                </button>
                <button
                  onClick={handleBackToDatasets}
                  className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 flex items-center"
                >
                  <span className="mr-1">↑</span> Datasets
                </button>