leumas-private-shared/src/Cards/BlockResponseCard.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

// BlockResponseCard.jsx
import React from 'react';
import PropTypes from 'prop-types';

const BlockResponseCard = ({ index, response }) => {
  return (
    <div className="bg-white shadow-lg rounded-lg overflow-hidden my-4 hover:border-2 hover:border-electric-blue">
      <div className="p-4">
        <h2 className="text-xl font-semibold mb-2">Block {index + 1} Response</h2>
        <div className="text-gray-700 text-base whitespace-pre-wrap max-h-[300px] overflow-y-scroll">
          {response ? response : 'No response available'}
        </div>
      </div>
    </div>
  );
};

BlockResponseCard.propTypes = {
  index: PropTypes.number.isRequired,
  response: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
};

export default BlockResponseCard;