diff --git a/src/components/VodProduct/danovin.mp4 b/src/components/VodProduct/danovin.mp4 deleted file mode 100644 index faba880..0000000 Binary files a/src/components/VodProduct/danovin.mp4 and /dev/null differ diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js index 2fda2be..2cc3800 100644 --- a/src/components/VodProduct/index.js +++ b/src/components/VodProduct/index.js @@ -13,7 +13,7 @@ import videoImage5 from "./videoImages/image-5.svg"; import videoImage6 from "./videoImages/image-6.svg"; import watermelon from "./watermelon.png"; -import video from "./danovin.mp4"; +// import video from "./danovin.mp4"; import discountImg from "./discount.png"; import heart from "./vuesax-linear-heart.svg"; import YellowDotIcon from "./yellowDotIcon.svg"; diff --git a/src/redux/actions/blog.js b/src/redux/actions/blog.js index d873065..42e911b 100644 --- a/src/redux/actions/blog.js +++ b/src/redux/actions/blog.js @@ -4,24 +4,8 @@ const blog = { (data = {}) => async (dispatch) => await proxy.get("public/blogList", data, { dispatch }), - // update: - // (data = {}, data2 = {}) => - // async (dispatch : Dispatch) => { - // await proxy.put("blog/update", data); - // await proxy.get("blog/list", data2, { dispatch }); - // }, - // add: - // (data = {}, data2 = {}) => - // async (dispatch : Dispatch) => { - // await proxy.post("blog/add", data); - // await proxy.get("blog/list", data2, { dispatch }); - // }, - // del: - // (data = {}, data2 = {}) => - // async (dispatch : Dispatch) => { - // await proxy.delete("blog/delete", data); - // await proxy.get("blog/list", data2, { dispatch }); - // }, + info: (data) => async (dispatch) => + await proxy.get("public/blogInfo", data, { dispatch }), }; export default blog; diff --git a/src/redux/reducers/blog.js b/src/redux/reducers/blog.js index f7fafc3..c80f699 100644 --- a/src/redux/reducers/blog.js +++ b/src/redux/reducers/blog.js @@ -4,19 +4,45 @@ const initialState = { loading: false, error: null, list: [], + info: null, + hashtags: [ + { + title: "فناوری اطلاعات", + color: "#019BC3", + }, + { + title: "سخت افزار", + color: "#7CC301", + }, + { + title: "آموزشی", + color: "#C5B90C", + }, + { + title: "فرهنگی", + color: "#C2684D", + }, + { + title: "معرفی کتاب", + color: "#8B4DC2", + }, + { + title: "مهارت آموزی", + color: "#780D6D", + }, + { + title: "پیشرفت شخصی", + color: "#E63F15", + }, + ], }; export default function blog(state = initialState, action) { let { type, data } = action; switch (type) { case "public/blogList": return { ...state, loading: false, list: data, error: null }; - // case "blog/update": - // return { ...state, loading: false, error: null }; - // case "blog/add": - // return { ...state, loading: false, error: null }; - // case "blog/delete": - // return { ...state, loading: false, error: null }; - ///////////// + case "public/blogInfo": + return { ...state, loading: false, error: null, blog: data }; case "blog/loading": return { ...state, loading: true }; case "blog/error": diff --git a/src/router.js b/src/router.js index 8daaa66..07864c3 100644 --- a/src/router.js +++ b/src/router.js @@ -28,6 +28,7 @@ import Contact from "./views/Contact"; import Dashboard from "./views/Dashboard"; import FooterDesign1 from "./components/Footer"; import Bugs from "./views/BugsAndProblems"; +import Blogs from "./views/Blogs"; // import VideoTube from "./views/Home/VideoTube"; function Router({ @@ -352,6 +353,23 @@ function Router({ /> } /> + + } + /> } /> + + diff --git a/src/views/Blogs/index.js b/src/views/Blogs/index.js new file mode 100644 index 0000000..6c8848d --- /dev/null +++ b/src/views/Blogs/index.js @@ -0,0 +1,109 @@ +import React, { useEffect } from "react"; +import { connect } from "react-redux"; +import { blog, publicApi } from "../../redux/actions"; +import { Carousel } from "@trendyol-js/react-carousel"; + +import Hashtags from "./layouts/Hashtags"; +import Single from "./layouts/Single"; +import Join from "./layouts/Join"; +import New from "./layouts/New"; +import Header from "./layouts/Header"; +import Suggest from "./layouts/Suggest"; +import Target from "./layouts/Target"; + +//assets +import arrow from "../../assets/icons/dropdown-blue.svg"; + +export const Blogs = ({ isMobile, getList, blogs, setHeaderOptions }) => { + useEffect(() => { + setHeaderOptions({ shown: true }); + if (blogs.length === 0) { + getList(); + } + }, []); + return ( +
+ + +
+
+ {blogs.length > 0 && ( + e.stopPropagation()} + /> + } + leftArrow={ + e.stopPropagation()} + /> + } + > + {blogs.map((blog, index) => ( + + ))} + + )} +
+
+
+ {blogs.length > 0 && ( + e.stopPropagation()} + /> + } + leftArrow={ + e.stopPropagation()} + /> + } + > + {blogs.map((blog, index) => ( + + ))} + + )} +
+
+ + +
+ ); +}; + +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile, + blogs: state.blog.list, +}); + +const mapDispatchToProps = { + getList: blog.list, + setHeaderOptions: publicApi.setHeaderOptions, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Blogs); diff --git a/src/views/Blogs/layouts/Hashtags.js b/src/views/Blogs/layouts/Hashtags.js new file mode 100644 index 0000000..84ea97a --- /dev/null +++ b/src/views/Blogs/layouts/Hashtags.js @@ -0,0 +1,28 @@ +import React from "react"; +import { connect } from "react-redux"; + +//assets +import arrowIcon from "../arrow.svg"; + +export const Hashtags = ({ hashtags }) => { + return ( +
+ +
    + {hashtags.map((hashtag, index) => ( +
  • + {"#" + " " + hashtag.title} +
    • + ))} +
+
+ ); +}; + +const mapStateToProps = (state) => ({ + hashtags: state.blog.hashtags, +}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Hashtags); diff --git a/src/views/Blogs/layouts/Header.js b/src/views/Blogs/layouts/Header.js new file mode 100644 index 0000000..aaa8a97 --- /dev/null +++ b/src/views/Blogs/layouts/Header.js @@ -0,0 +1,17 @@ +import React from "react"; +import { connect } from "react-redux"; + +export const Header = ({ title, color }) => { + return ( +
+ {title} + +
+ ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Header); diff --git a/src/views/Blogs/layouts/Join.js b/src/views/Blogs/layouts/Join.js new file mode 100644 index 0000000..ad032a5 --- /dev/null +++ b/src/views/Blogs/layouts/Join.js @@ -0,0 +1,53 @@ +import React from "react"; +import { connect } from "react-redux"; + +//assets +import picImage from "../pic.svg"; + +export const Join = ({}) => { + return ( +
+ +
+ اینجا خبری از اسپم نیست! + + خبرنامه وبلاگ دانوین + +

+ بهترین و آخرین اخبار علمی و آموزشی را در ایمیل خودتون دریافت کنید. هر + زمان هم که لازم نداشتید می تونید عضویت رو لغو کنید +

+
+
+
+ + +
+
+
+ ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Join); diff --git a/src/views/Blogs/layouts/New.js b/src/views/Blogs/layouts/New.js new file mode 100644 index 0000000..c990cc7 --- /dev/null +++ b/src/views/Blogs/layouts/New.js @@ -0,0 +1,53 @@ +import React from "react"; +import { connect } from "react-redux"; +import { Link } from "react-router-dom"; +import Avatar from "../../../components/Avatar"; + +export const New = ({ blog }) => { + return ( + + + {blog?.title} +

+ هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس + می‌زند در نهایت این مرگ{" "} +

+
+
+ +
+ + {"نوشته از:" + " " + "کامران ایزدی"} + +

+ {"سردبیر بخش وبلاگ دانوین"} +

+
+
+
+ + {"زمان مطالعه" + " " + "۳۰ دقیقه"} + + + {"1400/11/24"} + +
+
+ + ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(New); diff --git a/src/views/Blogs/layouts/Single.js b/src/views/Blogs/layouts/Single.js new file mode 100644 index 0000000..cdeb617 --- /dev/null +++ b/src/views/Blogs/layouts/Single.js @@ -0,0 +1,60 @@ +import React from "react"; +import { connect } from "react-redux"; +import Avatar from "../../../components/Avatar"; + +export const Single = ({ blog, isMobile }) => { + return ( +
+
+ +
+
+
+

{blog?.title}

+

+ هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس + می‌زند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد + بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن + بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان{" "} +

+
+
+
+ +
+ + {"نوشته از:" + " " + "کامران ایزدی"} + +

+ {"سردبیر بخش وبلاگ دانوین"} +

+
+
+
+ {"زمان مطالعه" + " " + "۳۰ دقیقه"} + {'1400/11/24'} +
+
+
+
+ ); +}; + +const mapStateToProps = (state) => ({ + blog: state.blog.list[0], + isMobile: state.publicApi.isMobile, +}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Single); diff --git a/src/views/Blogs/layouts/Suggest.js b/src/views/Blogs/layouts/Suggest.js new file mode 100644 index 0000000..d7f1ac8 --- /dev/null +++ b/src/views/Blogs/layouts/Suggest.js @@ -0,0 +1,27 @@ +import React from "react"; +import { connect } from "react-redux"; +import { Link } from "react-router-dom"; + +export const Suggest = ({ blog }) => { + return ( + + + {blog?.title} + + ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Suggest); diff --git a/src/views/Blogs/layouts/Target.js b/src/views/Blogs/layouts/Target.js new file mode 100644 index 0000000..e191be0 --- /dev/null +++ b/src/views/Blogs/layouts/Target.js @@ -0,0 +1,83 @@ +import React from "react"; +import { connect } from "react-redux"; +import { Link } from "react-router-dom"; +import Avatar from "../../../components/Avatar"; + +export const Target = ({ blogs }) => { + const Large = ({ blog }) => { + return ( + + +
+ + {blog?.title} + +
+
+ +
+ + {"نوشته از:" + " " + "کامران ایزدی"} + +

+ {"سردبیر بخش وبلاگ دانوین"} +

+
+
+
+
+ + ); + }; + + const Small = ({ blogs }) => { + return ( +
+ {blogs.map((blog, index) => ( + + +
+ {blog?.title} +

+ هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی + می‌کند پس می‌زند در نهایت این مرگ{" "} +

+
+ + ))} +
+ ); + }; + return ( +
+ + +
+ ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Target); diff --git a/src/views/Blogs/pic.svg b/src/views/Blogs/pic.svg new file mode 100644 index 0000000..8c0a511 --- /dev/null +++ b/src/views/Blogs/pic.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 58c35ee..45d5446 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,6 +19,7 @@ module.exports = { red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه yellow2: "#FDFFDA", // در انیمیشن موبایل که برای اسکن کد میاد نتیجه اسکن پس زمینه لینک ها yellow3: "#EFFF00", // خط زیر متن یادگیری در دیزاین موبایل پابلیک صفحه هوم + yellow4: "#FFEE00", gray36: "#52796f", // در حالت دارک صفحه موبایل پس زمینه دکمه های کیو آر و ای آز در هدر orange1: "#FF6600", // خط زیر متن کنارتونیم در دیزاین موبایل پابلیک صفحه هوم greenBA: "#06BAC0", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات