update src/views/Blog/index.js

master
Reza_ashrafi 3 years ago
parent 7ddec90ccd
commit f128c15c5e
  1. 148
      src/views/Blog/index.js

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

Loading…
Cancel
Save