const Card = function()

in src/components/Blog/EditorPick.tsx [10:53]

• 44 lines of code
• 1 McCabe index (conditional complexity)

const Card = function (props: {cardInfo: BlogInfoType, index: number}) {
  const { cardInfo, index } = props;
  return (
    <a
      href={cardInfo.detailLink}
      className="flex flex-col sm:flex-row mobile:flex-col
        w-[22.33vw] sm:max-w-[100%] sm:min-w-[100%]
        p-[16px] bg-neutral-invert
        rounded-[16px] shadow-lower  hover:shadow-high hover:no-underline "
    >
      <img
        src={coverImgArr[index]}
        className="
            w-[100%] sm:w-[43.05vw]  sm:min-w-[43.05vw] mobile:w-[100%] 
            h-[12.76vw] sm:h-[24.21vw] mobile:h-[45.88vw] 
            bg-primary-300 rounded-[16px]"
      />
      <div className="sm:ml-5 mobile:ml-[0]">
        <div className="flex h-[90px] sm:h-[60px] items-center mt-3 sm:mt-[0]  mb-3">
          <p
            className="
                text-primary-800 text-heading2 sm:text-heading4 font-semibold
                line-clamp-3 m-[0] 
                "
          >
            {cardInfo.title}
          </p>
        </div>
        <div className="
        text-neutral-300 text-label14Lake
        ">
            {`${dateFormatter(cardInfo.publishTime)} · ${cardInfo.readTime}`}
        </div>
        <div className="mt-3 h-[50px] flex items-center">
          <img src={cardInfo.authorImgUrl} className="w-[50px] h-[50px] mr-3 rounded-full bg-primary-500 shrink-0 uppercase flex justify-center items-center overflow-hidden text-white"
          />
          <span className="text-primary-800 text-heading4 font-semibold">
            {cardInfo.authorName}
          </span>
        </div>
      </div>
    </a>
  );
};