diff --git a/src/components/Audio/index.js b/src/components/Audio/index.js new file mode 100644 index 0000000..5085f97 --- /dev/null +++ b/src/components/Audio/index.js @@ -0,0 +1,10 @@ +export default function MaterialAudioPlayer(props) { + return ( + + ); +} diff --git a/src/router.js b/src/router.js index 527f093..acc45f5 100644 --- a/src/router.js +++ b/src/router.js @@ -188,7 +188,7 @@ function Router({ isDark, isLogin, headerOptions }) { headerOptions={{ shown: "false", }} - page="scan" + page="content" /> } /> diff --git a/src/views/QR/Content/components/Links.js b/src/views/QR/Content/components/Links.js new file mode 100644 index 0000000..40a999e --- /dev/null +++ b/src/views/QR/Content/components/Links.js @@ -0,0 +1,19 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import linkIcon from "./links.svg"; + +export default function Links({ links }) { + return ( +
+
+ لینک ها + {links.map((link, i) => ( + + {link} + + ))} +
+ +
+ ); +} diff --git a/src/views/QR/Content/components/PDF.js b/src/views/QR/Content/components/PDF.js new file mode 100644 index 0000000..f294c8a --- /dev/null +++ b/src/views/QR/Content/components/PDF.js @@ -0,0 +1,11 @@ +import React from "react"; +import pdfIcon from "./pdf.svg"; + +export default function PDF({ name, file }) { + return ( +
+ {name} + +
+ ); +} diff --git a/src/views/QR/Content/components/PPT.js b/src/views/QR/Content/components/PPT.js new file mode 100644 index 0000000..246407c --- /dev/null +++ b/src/views/QR/Content/components/PPT.js @@ -0,0 +1,17 @@ +import React from "react"; + +import pptIcon from "./ppt.png"; + +export default function PPT({ name, file }) { + return ( +
+ + {name} + + +
+ ); +} diff --git a/src/views/QR/Content/components/Tab.js b/src/views/QR/Content/components/Tab.js new file mode 100644 index 0000000..d1788bf --- /dev/null +++ b/src/views/QR/Content/components/Tab.js @@ -0,0 +1,139 @@ +import React, { useState } from "react"; + +import Voice from "./Voice"; +import Video from "./Video"; +import PPT from "./PPT"; +import PDF from "./PDF"; +import Links from "./Links"; + +//assets + +export default function Tab({ data }) { + const [dataType, setDataType] = useState("all"); + return ( +
+
+ + + + + + +
+
+ {dataType === "all" && ( + <> + {data.voice && ( + + )} + {data.video && ( +
+
+ ); +} diff --git a/src/views/QR/Content/components/Video.js b/src/views/QR/Content/components/Video.js new file mode 100644 index 0000000..d7d6bbc --- /dev/null +++ b/src/views/QR/Content/components/Video.js @@ -0,0 +1,19 @@ +import React from "react"; + +export default function Video({ name, file }) { + return ( +
+ + {name} + +
+ +
+
+ ); +} diff --git a/src/views/QR/Content/components/Voice.js b/src/views/QR/Content/components/Voice.js new file mode 100644 index 0000000..65e8842 --- /dev/null +++ b/src/views/QR/Content/components/Voice.js @@ -0,0 +1,14 @@ +import React from "react"; + +import MusicPlayer from "../../../../components/Audio"; + +export default function Voice({ name, file }) { + return ( +
+ + {name} + + +
+ ); +} diff --git a/src/views/QR/Content/components/links.svg b/src/views/QR/Content/components/links.svg new file mode 100644 index 0000000..4717281 --- /dev/null +++ b/src/views/QR/Content/components/links.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/views/QR/Content/components/pdf.svg b/src/views/QR/Content/components/pdf.svg new file mode 100644 index 0000000..6c1af40 --- /dev/null +++ b/src/views/QR/Content/components/pdf.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/views/QR/Content/components/ppt.png b/src/views/QR/Content/components/ppt.png new file mode 100644 index 0000000..80965ba Binary files /dev/null and b/src/views/QR/Content/components/ppt.png differ diff --git a/src/views/QR/Content/index.js b/src/views/QR/Content/index.js index 8018950..df8c64a 100644 --- a/src/views/QR/Content/index.js +++ b/src/views/QR/Content/index.js @@ -1,12 +1,50 @@ import React, { useEffect } from "react"; import { connect } from "react-redux"; import { publicApi } from "../../../redux/actions"; +import Tab from "./components/Tab"; -export const Content = ({ headerOptions, setHeaderOptions, setPage }) => { +export const Content = ({ headerOptions, setHeaderOptions, setPage, data }) => { useEffect(() => { - setHeaderOptions(headerOptions); - }); - return
; + setHeaderOptions({ + logo: true, + hamburgerMenu: true, + qr: true, + title: false, + back: false, + shown: true, + menu: false, + }); + }, []); + return ( +
+
+ +
+ + {data.name} + + + {data.grade} + +

{`شما در حال مشاهده صفحه ${data.page} هستید.`}

+
+
+ + +
+ ); }; const mapStateToProps = (state) => ({}); @@ -16,3 +54,21 @@ const mapDispatchToProps = { }; export default connect(mapStateToProps, mapDispatchToProps)(Content); + +Content.defaultProps = { + data: { + name: "ریاضیات گسسته خیلی پیشرفته", + grade: "پایه هفتم ابتدایی", + page: "67", + percent: "62", + voice: { name: "استاد رضایی: فصل پنجم توضیح در مورد آتش فشان ها", file: 1 }, + video: { name: "ویدئوی آزمایش آتشفشان سرکه ای", file: 1 }, + pdf: { name: "فایل پاورپوینت ارائه درس آتشفشان ها", file: 1 }, + ppt: { name: "فایل پاورپوینت ارائه درس آتشفشان ها", file: 1 }, + links: [ + "وبسایت آموزشی دانوین", + "وبسایت رسمی مدیریت راهبردی کشور", + "سازمان تبلیغات صنایع سبک ", + ], + }, +}; diff --git a/src/views/QR/index.js b/src/views/QR/index.js index 53d597a..281506a 100644 --- a/src/views/QR/index.js +++ b/src/views/QR/index.js @@ -6,10 +6,10 @@ function QR({ headerOptions, page }) { const [currentPage, setCurrentPage] = useState(page); return ( <> - {page === "scan" && ( - + {currentPage === "scan" && ( + )} - {page === "content" && ( + {currentPage === "content" && ( )}