newsDetail.tsx

newsDetail.tsx

import { Dialog } from 'evergreen-ui';

interface INewsDetail {
  isShown: boolean;
  onClose: any;
  data: any;
}

const NewsDetail = ({ isShown, onClose, data }: INewsDetail) => {
  const setTextTypes = (child, child_idx, array) => {
    if (typeof child === `string`) {
      if (typeof array[child_idx + 1] !== `object` || array[child_idx + 1]?.type !== `url`) {
        return child;
      }
    } else if (typeof child === `object`) {
      if (child?.type === `url`) {
        return (
          <a
            href={child?.params?.url}
            target="_blank"
            rel="noopener noreferrer"
            key={child_idx}
            className="hover:underline"
          >
            {array[child_idx - 1]}
          </a>
        );
      }
    }
  };

  return (
    <Dialog
      width={700}
      isShown={isShown}
      onCloseComplete={onClose}
      hasFooter={false}
      title={data?.title}
    >
      <div>
        {data?.description?.children?.map((item, idx) => {
          if (item?.type === `p`) {
            return (
              <p className="mb-4 text-gray-600" key={idx}>
                {item?.children?.map((child, child_idx) =>
                  setTextTypes(child, child_idx, item?.children),
                )}
              </p>
            );
          }
        })}
      </div>
    </Dialog>
  );
};

export default NewsDetail;