web/components/Pages/BlogComponents/Cart.jsx

46 lines
1.5 KiB
JavaScript

import Image from "next/image";
import Link from "next/link";
import PersianNumber from "@plug/PersianNumber";
import React from "react";
const Cart = ({ mainImage, title, categoryName, slug, id }) => {
console.log(`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${mainImage}`);
return (
<Link href={`/blogs/${id}/${slug}`}>
<div className="bg-white rounded-3xl p-2 ">
<div className="w-full h-[200px] overflow-hidden rounded-3xl">
<div>
<Image
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${mainImage}`}
width={500}
height={500}
className="w-full h-[200px] object-cover"
alt={title}
/>
</div>
</div>
<div className="mt-3 text-right ">
<h3 className=" text-gray-500 font-medium mr-3">{title} </h3>
<div className="flex justify-end mb-2">
<div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
<p className="mb-0 text-[12px] text-gray-600">{categoryName}</p>
</div>
<div className="bg-secondary-800 rounded-2xl p-1 px-4 mt-3 mx-2">
<p className="mb-0 text-[12px] text-gray-700 font-medium">
مقاله را در
<PersianNumber number={2} />
دقیقه بخوانید{" "}
</p>
</div>
</div>
</div>
</div>
</Link>
);
};
export default Cart;