reza added something

temp
Reza_ashrafi 3 years ago
parent 63e644b557
commit 503bf41a3d
  1. 18
      src/router.js
  2. 119
      src/views/Blog/index.js
  3. 2
      src/views/Blogs/layouts/Join.js
  4. 2
      src/views/Blogs/layouts/New.js
  5. 5
      src/views/Blogs/layouts/Single.js
  6. 2
      src/views/Blogs/layouts/Suggest.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="*"

@ -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);

@ -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=""

@ -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" }}
>

@ -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>
);
};

@ -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" }}
>

Loading…
Cancel
Save