reza added something

src/router.js

@@ -29,6 +29,7 @@ import Dashboard from "./views/Dashboard";
 import FooterDesign1 from "./components/Footer";
 import Bugs from "./views/BugsAndProblems";
 import Blogs from "./views/Blogs";
+import Blog from "./views/Blog";
 // import VideoTube from "./views/Home/VideoTube";
 
 function Router({
@@ -370,6 +371,23 @@ function Router({
                 />
               }
             />
+            <Route
+              path="/blogs/:id"
+              exact
+              element={
+                <Blog
+                  // headerOptions={{
+                  //   logo: true,
+                  //   hamburgerMenu: true,
+                  //   qr: true,
+                  //   title: false,
+                  //   back: false,
+                  //   shown: true,
+                  //   menu: false,
+                  // }}
+                />
+              }
+            />
             <Route path="/bugs" exact element={<Bugs />} />
             <Route
               path="*"

src/views/Blog/index.js

@@ -0,0 +1,119 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { blog, publicApi } from "../../redux/actions";
+import { Carousel } from "@trendyol-js/react-carousel";
+import location from "../../utils/location";
+
+import Hashtags from "../Blogs/layouts/Hashtags";
+import Header from "../Blogs/layouts/Header";
+import Suggest from "../Blogs/layouts/Suggest";
+import Avatar from "../../components/Avatar";
+
+//assets
+import arrow from "../../assets/icons/dropdown-blue.svg";
+
+export const Blog = ({
+  isMobile,
+  getInfo,
+  blog,
+  setHeaderOptions,
+  getList,
+  blogs,
+}) => {
+  useEffect(() => {
+    setHeaderOptions({ shown: true });
+    getInfo({ id: location.getId() });
+    if (blogs.length === 0) {
+      getList();
+    }
+  }, []);
+  return (
+    <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24">
+      <Hashtags />
+      <div
+        className="w-full"
+        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:flex-row my-5 gap-5">
+        <strong className="flex-1 lg:text-5xl lg:font-black">
+          {blog?.title}
+        </strong>
+        <div className="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">
+                {"نوشته از:" + " " + "کامران ایزدی"}
+              </strong>
+              <p className="lg:text-sm lg:font-semibold text-gray70 mt-2">
+                {"سردبیر بخش وبلاگ دانوین"}
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col justify-center items-end">
+            <span className="lg:text-tiny text-gray1 lg:font-black">
+              {"زمان مطالعه" + " " + "۳۰ دقیقه"}
+            </span>
+            <span className="mt-2 lg:text-tiny text-gray1 lg:font-black">
+              {"1400/11/24"}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="leading-8 lg:text-base" dangerouslySetInnerHTML={{ __html: blog?.text }} />{" "}
+      <Header title={"پیشنهادی "} />
+      <div className="w-full relative" style={{ direction: "ltr" }}>
+        {blogs.length > 0 && (
+          <Carousel
+            show={4}
+            slide={2}
+            swiping={true}
+            useArrowKeys={true}
+            transition={0.5}
+            rightArrow={
+              <img
+                className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
+                src={arrow}
+                alt=""
+                // onClick={(e) => e.stopPropagation()}
+              />
+            }
+            leftArrow={
+              <img
+                className="absolute top-1/2 transform -translate-y-1/2  -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
+                src={arrow}
+                alt=""
+                // onClick={(e) => e.stopPropagation()}
+              />
+            }
+          >
+            {blogs.map((blog, index) => (
+              <Suggest blog={blog} key={index} />
+            ))}
+          </Carousel>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+  blog: state.blog.blog,
+  blogs: state.blog.list,
+});
+
+const mapDispatchToProps = {
+  getInfo: blog.info,
+  getList: blog.list,
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Blog);

src/views/Blogs/layouts/Join.js

@@ -6,7 +6,7 @@ import picImage from "../pic.svg";
 
 export const Join = ({}) => {
   return (
-    <div className="w-full h-72 border-2 border-solid border-gray-100 rounded-md flex mt-20">
+    <div className="w-full h-72 border-2 border-solid border-gray-200 rounded-md flex mt-32">
       <img
         src={picImage}
         alt=""

src/views/Blogs/layouts/New.js

@@ -6,7 +6,7 @@ import Avatar from "../../../components/Avatar";
 export const New = ({ blog }) => {
   return (
     <Link
-      to={"blogs/" + blog?.id}
+      to={'/blogs/' + blog?.id}
       className="px-4 flex flex-col"
       style={{ direction: "rtl" }}
     >

src/views/Blogs/layouts/Single.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { connect } from "react-redux";
+import {Link} from 'react-router-dom';
 import Avatar from "../../../components/Avatar";
 
 export const Single = ({ blog, isMobile }) => {
   return (
-    <div className="flex flex-col lg:flex-row lg:gap-5">
+    <Link to={'/blogs/' + blog?.id} className="flex flex-col lg:flex-row lg:gap-5">
       <div
         className="w-full lg:w-1/2 rounded-md overflow-hidden"
         style={{
@@ -46,7 +47,7 @@ export const Single = ({ blog, isMobile }) => {
           </div>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

src/views/Blogs/layouts/Suggest.js

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 export const Suggest = ({ blog }) => {
   return (
     <Link
-      to={"blogs/" + blog?.id}
+      to={"/blogs/" + blog?.id}
       className="px-4 flex flex-col"
       style={{ direction: "rtl" }}
     >