|
|
|
@ -15,7 +15,6 @@ import { useParams } from "react-router-dom"; |
|
|
|
|
import arrow from "../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
|
|
|
|
|
export const Blog = ({ |
|
|
|
|
isMobile, |
|
|
|
|
getInfo, |
|
|
|
|
blog, |
|
|
|
|
setHeaderOptions, |
|
|
|
@ -80,102 +79,99 @@ export const Blog = ({ |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-0 pb-24 "> |
|
|
|
|
<Hashtags /> |
|
|
|
|
{isMobile && ( |
|
|
|
|
<div |
|
|
|
|
className="w-full rounded-md overflow-hidden relative" |
|
|
|
|
style={{ |
|
|
|
|
minHeight: 200, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
|
|
|
alt="" |
|
|
|
|
className="w-full h-full absolute left-0 top-0" |
|
|
|
|
/> |
|
|
|
|
<div className="flex flex-col justify-end bg-gradient-to-t from-black absolute top-0 left-0 z-10 w-full h-full pb-2 px-2"> |
|
|
|
|
<div className="w-full flex justify-between"> |
|
|
|
|
<div className="flex"> |
|
|
|
|
<Avatar size={40} /> |
|
|
|
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
|
|
|
<strong className="text-gray-300 text-tiny font-bold"> |
|
|
|
|
{window.t("نوشته از:" + " " + "کامران ایزدی")} |
|
|
|
|
</strong> |
|
|
|
|
<p className="text-gray-300 mt-2 text-xs"> |
|
|
|
|
{window.t("سردبیر بخش وبلاگ دانوین")} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col justify-center items-end"> |
|
|
|
|
<span className="text-gray-300 text-sm"> |
|
|
|
|
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")} |
|
|
|
|
</span> |
|
|
|
|
<span className="mt-2 text-gray-300 text-sm font-bold"> |
|
|
|
|
{window.t("1400/11/24")} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{!isMobile && ( |
|
|
|
|
<div |
|
|
|
|
className="w-full hidden lg:flex" |
|
|
|
|
style={{ |
|
|
|
|
backgroundImage: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`, |
|
|
|
|
height: "calc(100vh / 2)", |
|
|
|
|
backgroundRepeat: "no-repeat", |
|
|
|
|
backgroundAttachment: "fixed", |
|
|
|
|
backgroundSize: "cover", |
|
|
|
|
backgroundPosition: "center bottom", |
|
|
|
|
}} |
|
|
|
|
></div> |
|
|
|
|
)} |
|
|
|
|
<div className="flex lg:my-5 gap-5"> |
|
|
|
|
<strong className="flex-1 lg:text-5xl lg:font-black dark:text-gray-200"> |
|
|
|
|
{blog?.title} |
|
|
|
|
</strong> |
|
|
|
|
{!isMobile && ( |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<div |
|
|
|
|
className="flex lg:hidden w-full rounded-md overflow-hidden relative" |
|
|
|
|
style={{ |
|
|
|
|
minHeight: 200, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
|
|
|
alt="" |
|
|
|
|
className="w-full h-full absolute left-0 top-0" |
|
|
|
|
/> |
|
|
|
|
<div className="flex flex-col justify-end bg-gradient-to-t from-black absolute top-0 left-0 z-10 w-full h-full pb-2 px-2"> |
|
|
|
|
<div className="w-full flex justify-between"> |
|
|
|
|
<div className="flex"> |
|
|
|
|
<Avatar size={60} /> |
|
|
|
|
<Avatar size={40} /> |
|
|
|
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
|
|
|
<strong className="lg:text-base lg:font-black text-gray1"> |
|
|
|
|
<strong className="text-gray-300 text-tiny font-bold"> |
|
|
|
|
{window.t("نوشته از:" + " " + "کامران ایزدی")} |
|
|
|
|
</strong> |
|
|
|
|
<p className="lg:text-sm lg:font-semibold text-gray70 mt-2"> |
|
|
|
|
<p className="text-gray-300 mt-2 text-xs"> |
|
|
|
|
{window.t("سردبیر بخش وبلاگ دانوین")} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col justify-center items-end"> |
|
|
|
|
<span className="lg:text-tiny text-gray1 lg:font-black"> |
|
|
|
|
<span className="text-gray-300 text-sm"> |
|
|
|
|
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")} |
|
|
|
|
</span> |
|
|
|
|
<span className="mt-2 lg:text-tiny text-gray1 lg:font-black"> |
|
|
|
|
<span className="mt-2 text-gray-300 text-sm font-bold"> |
|
|
|
|
{window.t("1400/11/24")} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
className="w-full hidden lg:flex" |
|
|
|
|
style={{ |
|
|
|
|
backgroundImage: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`, |
|
|
|
|
height: "calc(100vh / 2)", |
|
|
|
|
backgroundRepeat: "no-repeat", |
|
|
|
|
backgroundAttachment: "fixed", |
|
|
|
|
backgroundSize: "cover", |
|
|
|
|
backgroundPosition: "center bottom", |
|
|
|
|
}} |
|
|
|
|
></div> |
|
|
|
|
|
|
|
|
|
<div className="flex lg:my-5 gap-5"> |
|
|
|
|
<strong className="flex-1 lg:text-5xl lg:font-black dark:text-gray-200"> |
|
|
|
|
{blog?.title} |
|
|
|
|
</strong> |
|
|
|
|
{/* desktop */} |
|
|
|
|
<div className="hidden lg:flex flex-col"> |
|
|
|
|
<div className="flex"> |
|
|
|
|
<Avatar size={60} /> |
|
|
|
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
|
|
|
<strong className="lg:text-base lg:font-black text-gray1"> |
|
|
|
|
{window.t("نوشته از:" + " " + "کامران ایزدی")} |
|
|
|
|
</strong> |
|
|
|
|
<p className="lg:text-sm lg:font-semibold text-gray70 mt-2"> |
|
|
|
|
{window.t("سردبیر بخش وبلاگ دانوین")} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col justify-center items-end"> |
|
|
|
|
<span className="lg:text-tiny text-gray1 lg:font-black"> |
|
|
|
|
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")} |
|
|
|
|
</span> |
|
|
|
|
<span className="mt-2 lg:text-tiny text-gray1 lg:font-black"> |
|
|
|
|
{window.t("1400/11/24")} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* desktop */} |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="leading-8 lg:text-base text-sm dark:text-white" |
|
|
|
|
dangerouslySetInnerHTML={{ __html: blog?.text }} |
|
|
|
|
/> |
|
|
|
|
<Header title={window.t("پیشنهادی")} /> |
|
|
|
|
|
|
|
|
|
{isMobile ? ( |
|
|
|
|
<div className="w-full flex overflow-x-scroll no-scrollbar gap-4"> |
|
|
|
|
{blogs.map((blog, index) => ( |
|
|
|
|
<New blog={blog} key={index} /> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<div className="w-full relative" style={{ direction: "ltr" }}> |
|
|
|
|
<suggestionSlider /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* mobile */} |
|
|
|
|
<div className="lg:hidden w-full flex overflow-x-scroll no-scrollbar gap-4"> |
|
|
|
|
{blogs.map((blog, index) => ( |
|
|
|
|
<New blog={blog} key={index} /> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
{/* mobile */} |
|
|
|
|
{/* desktop */} |
|
|
|
|
<div className="hidden lg:flex w-full relative ltr"> |
|
|
|
|
<suggestionSlider /> |
|
|
|
|
</div> |
|
|
|
|
{/* desktop */} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|