woedii/components/Recent_Card.tsx

import Image from "next/image";
import React from "react";

interface RecentCardProps {
  image: string;
  title: string;
  tag: string;
  description: string;
}

const Recent_Card: React.FC<RecentCardProps> = ({ image, title, tag, description }) => {
  return (
    <div className="flex flex-col justify-start items-start w-full bg-white rounded-lg overflow-hidden">
      <div className="recent_card flex justify-center items-center w-full h-32 sm:h-36 md:h-40 overflow-hidden">
        <Image
          src={image}
          alt={title}
          className="card_img object-cover w-full  h-32 sm:h-36 md:h-40"
          width={250}
          height={150}
        />
      </div>
      <h3 className="text-xs sm:text-sm md:text-base font-medium text-slate-900 mt-2 truncate w-full p-2">
        {title}
      </h3>
      <p className="text-xs font-normal text-slate-400 w-full p-2">
        {tag} <span className="ml-1">{description}</span>
      </p>
    </div>
  );
};

export default Recent_Card;