reza added content

src/components/Audio/index.js

@@ -0,0 +1,10 @@
+export default function MaterialAudioPlayer(props) {
+  return (
+    <audio controls className="w-full h-10 mt-4">
+      <source
+        src="http://sv.bahar-music.ir/archive/S/Sadegh/Ho3ein%20Ft%20Sadegh%20-%20Shaba%20Radepa%20Tanhayi/Sadegh%20Ft%20Ho3ein%20-%20Shaba.mp3"
+        type="audio/mp3"
+      />
+    </audio>
+  );
+}

src/router.js

@@ -188,7 +188,7 @@ function Router({ isDark, isLogin, headerOptions }) {
                   headerOptions={{
                     shown: "false",
                   }}
-                  page="scan"
+                  page="content"
                 />
               }
             />

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 (
+    <div className="w-full flex-row justify-between items-center rounded-md bg-yellow-100 bg-opacity-20 py-3 px-2 mt-5 relative dark:bg-opacity-10">
+      <div className="flex flex-col">
+        <strong className="text-sm font-normal dark:text-white">لینک ها</strong>
+        {links.map((link, i) => (
+          <Link to="#" key={i} className="text-xs mt-1 dark:text-white">
+            {link}
+          </Link>
+        ))}
+      </div>
+      <img src={linkIcon} className="w-8 absolute left-2 top-1/2 transform -translate-y-1/2" />
+    </div>
+  );
+}

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 (
+    <div className="w-full flex-row justify-between items-center rounded-md bg-red-100 bg-opacity-50 py-6 px-2 mt-5 relative dark:bg-opacity-10">
+      <strong className="text-right text-red-900 text-xs font-normal dark:text-white">{name}</strong>
+      <img src={pdfIcon} className="w-8 absolute left-2 top-1/2 transform -translate-y-1/2" />
+    </div>
+  );
+}

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 (
+    <div className="w-full flex-row-reverse justify-between items-center rounded-md bg-green-100 bg-opacity-50 py-6 px-2 mt-5 relative dark:bg-opacity-10">
+      <strong className="text-right text-green-900 text-xs font-normal dark:text-white">
+        {name}
+      </strong>
+      <img
+        src={pptIcon}
+        className="w-8 absolute left-2 top-1/2 transform -translate-y-1/2"
+      />
+    </div>
+  );
+}

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 (
+    <div className="w-full flex flex-col rounded-md overflow-hidden mt-5 border border-solid border-blueFF1 dark:border-opacity-10">
+      <div className="w-full flex flex-row justify-between">
+        <button
+          onClick={() => setDataType("all")}
+          className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${
+            dataType === "all"
+              ? "bg-blueFF1 font-medium"
+              : "bg-white font-normal"
+          }`}
+        >
+          تمامی محتوا
+        </button>
+        <button
+          onClick={() => setDataType("voice")}
+          className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${
+            dataType === "voice"
+              ? "bg-blueFF1 font-medium"
+              : "bg-white font-normal"
+          }`}
+        >
+          صوت
+        </button>
+        <button
+          onClick={() => setDataType("video")}
+          className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${
+            dataType === "video"
+              ? "bg-blueFF1 font-medium"
+              : "bg-white font-normal"
+          }`}
+        >
+          ویدئو
+        </button>
+        <button
+          onClick={() => setDataType("pdf")}
+          className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${
+            dataType === "pdf"
+              ? "bg-blueFF1 font-medium"
+              : "bg-white font-normal"
+          }`}
+        >
+          پی دی اف
+        </button>
+        <button
+          onClick={() => setDataType("ppt")}
+          className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${
+            dataType === "ppt"
+              ? "bg-blueFF1 font-medium"
+              : "bg-white font-normal"
+          }`}
+        >
+          پاور پوینت
+        </button>
+        <button
+          onClick={() => setDataType("links")}
+          className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${
+            dataType === "links"
+              ? "bg-blueFF1 font-medium"
+              : "bg-white font-normal"
+          }`}
+        >
+          لینک ها
+        </button>
+      </div>
+      <div className="flex flex-col w-full p-4">
+        {dataType === "all" && (
+          <>
+            {data.voice && (
+              <Voice name={data.voice.name} file={data.voice.file} />
+            )}
+            {data.video && (
+              <Video name={data.video.name} file={data.voice.file} />
+            )}
+            {data.ppt && <PPT name={data.ppt.name} file={data.ppt.file} />}
+            {data.pdf && <PDF name={data.ppt.name} file={data.ppt.file} />}
+            {data.links && <Links links={data.links} />}
+          </>
+        )}
+        {dataType === "voice" && (
+          <>
+            {data.voice ? (
+              <Voice name={data.voice.name} file={data.voice.file} />
+            ) : (
+              <p className="text-xs text-gray70">فایل صدا یافت نشد.</p>
+            )}
+          </>
+        )}
+        {dataType === "video" && (
+          <>
+            {data.video ? (
+              <Video name={data.video.name} file={data.voice.file} />
+            ) : (
+              <p className="text-xs text-gray70">فایل تصویری یافت نشد.</p>
+            )}
+          </>
+        )}
+        {dataType === "ppt" && (
+          <>
+            {data.ppt ? (
+              <PPT name={data.ppt.name} file={data.ppt.file} />
+            ) : (
+              <p className="text-xs text-gray70">فایل پاورپوینت یافت نشد.</p>
+            )}
+          </>
+        )}
+        {dataType === "pdf" && (
+          <>
+            {data.pdf ? (
+              <PDF name={data.pdf.name} file={data.pdf.file} />
+            ) : (
+              <p className="text-xs text-gray70">فایل پی دی اف یافت نشد.</p>
+            )}
+          </>
+        )}
+        {dataType === "links" && (
+          <>
+            {data.links ? (
+              <Links name={data.links.name} links={data.links} />
+            ) : (
+              <p className="text-xs text-gray70">لینکی پیدا نشد.</p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

src/views/QR/Content/components/Video.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function Video({ name, file }) {
+  return (
+    <div className="w-full flex-col mt-5">
+      <strong className="w-full text-right text-green-900 mb-2 text-xs font-normal">
+        {name}
+      </strong>
+      <div className="w-full rounded-md overflow-hidden mt-4">
+        <video
+          style={{ width: "100%", height: "calc(100vw * 9 / 16 - 32)" }}
+          controls
+        >
+          <source src={`https://dnvn.ir/api/v1/file/20540`} type="video/mp4" />
+        </video>
+      </div>
+    </div>
+  );
+}

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 (
+    <div className="w-full flex-col rounded-md bg-green-200 bg-opacity-30 py-3 px-2 mt-4 dark:bg-opacity-10">
+      <strong className="w-full text-right text-green-900 text-xs font-normal dark:text-white">
+        {name}
+      </strong>
+      <MusicPlayer />
+    </div>
+  );
+}

src/views/QR/Content/components/links.svg

@@ -0,0 +1,8 @@
+<svg id="link_1_" data-name="link (1)" xmlns="http://www.w3.org/2000/svg" width="19.001" height="19.002" viewBox="0 0 19.001 19.002">
+  <g id="Group_467" data-name="Group 467">
+    <g id="Group_466" data-name="Group 466">
+      <path id="Path_1936" data-name="Path 1936" d="M6.884,184.864,4.645,187.1a2.375,2.375,0,0,1-3.359-3.358l4.479-4.479a2.375,2.375,0,0,1,3.358,0,.792.792,0,1,0,1.12-1.12,3.958,3.958,0,0,0-5.6,0L.166,182.625a3.959,3.959,0,1,0,5.6,5.6L8,185.984a.792.792,0,1,0-1.12-1.12Z" transform="translate(0.993 -170.381)" fill="#d6ff06"/>
+      <path id="Path_1937" data-name="Path 1937" d="M200.692.159a3.959,3.959,0,0,0-5.6,0l-2.686,2.686a.792.792,0,0,0,1.12,1.12l2.686-2.686a2.375,2.375,0,0,1,3.359,3.358l-4.926,4.926a2.375,2.375,0,0,1-3.358,0,.792.792,0,0,0-1.12,1.12,3.958,3.958,0,0,0,5.6,0l4.926-4.926A3.958,3.958,0,0,0,200.692.159Z" transform="translate(-182.85 1)" fill="#d6ff06"/>
+    </g>
+  </g>
+</svg>

src/views/QR/Content/components/pdf.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.346" height="16.346" viewBox="0 0 16.346 16.346">
+  <g id="files" transform="translate(0 0)">
+    <g id="Group_450" data-name="Group 450" transform="translate(0 0)">
+      <g id="Group_449" data-name="Group 449">
+        <path id="Path_1925" data-name="Path 1925" d="M290.554,256h-2.043a.511.511,0,0,0-.511.511V260.6a.511.511,0,0,0,.511.511h2.043a1.022,1.022,0,0,0,1.022-1.022v-3.065A1.022,1.022,0,0,0,290.554,256Zm0,4.086h-1.532v-3.065h1.532Z" transform="translate(-278.805 -247.827)" fill="#ff0808"/>
+        <path id="Path_1926" data-name="Path 1926" d="M419.065,257.022V256h-2.554a.511.511,0,0,0-.511.511v4.6h1.022v-2.043h2.043v-1.022h-2.043v-1.022Z" transform="translate(-402.719 -247.827)" fill="#ff0808"/>
+        <path id="Path_1927" data-name="Path 1927" d="M1.022,14.813V1.532a.511.511,0,0,1,.511-.511H9.195V3.065a1.022,1.022,0,0,0,1.022,1.022h2.043V5.619h1.022V3.575a.511.511,0,0,0-.148-.363L10.068.148A.511.511,0,0,0,9.705,0H1.532A1.532,1.532,0,0,0,0,1.532V14.813a1.532,1.532,0,0,0,1.532,1.532H5.108V15.324H1.532A.511.511,0,0,1,1.022,14.813Z" transform="translate(0 0)" fill="#ff0808"/>
+        <path id="Path_1928" data-name="Path 1928" d="M162.554,256h-2.043a.511.511,0,0,0-.511.511v4.6h1.022v-1.532h1.532a1.022,1.022,0,0,0,1.022-1.022v-1.532A1.022,1.022,0,0,0,162.554,256Zm0,2.554h-1.532v-1.532h1.532Z" transform="translate(-154.892 -247.827)" fill="#ff0808"/>
+      </g>
+    </g>
+  </g>
+</svg>

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);
+    setHeaderOptions({
-  });
+      logo: true,
-  return <div></div>;
+      hamburgerMenu: true,
+      qr: true,
+      title: false,
+      back: false,
+      shown: true,
+      menu: false,
+    });
+  }, []);
+  return (
+    <div className="flex-1 flex flex-col px-4 pb-20">
+      <div className="flex w-full flex-row">
+        <img
+          className="rounded-md"
+          src={"https://dnvn.ir/api/v1/file/2105"}
+          style={{ width: 80, height: 120 }}
+        />
+        <div className="flex flex-col mr-3 pt-2">
+          <strong className="text-sm text-blue5F dark:text-white">
+            {data.name}
+          </strong>
+          <span className="text-xs text-blueC0 mt-1 dark:text-greenBA">
+            {data.grade}
+          </span>
+          <p className="text-xs mt-1 text-blueC0 dark:text-greenBA">{`شما در حال مشاهده صفحه ${data.page} هستید.`}</p>
+        </div>
+      </div>
+
+      <Tab
+        data={{
+          voice: data.voice,
+          video: data.video,
+          pdf: data.pdf,
+          ppt: data.ppt,
+          links: data.links,
+        }}
+      />
+    </div>
+  );
 };
 
 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: [
+      "وبسایت آموزشی دانوین",
+      "وبسایت رسمی مدیریت راهبردی کشور",
+      "سازمان تبلیغات صنایع سبک ",
+    ],
+  },
+};

src/views/QR/index.js

@@ -6,10 +6,10 @@ function QR({ headerOptions, page }) {
   const [currentPage, setCurrentPage] = useState(page);
   return (
     <>
-      {page === "scan" && (
+      {currentPage === "scan" && (
-        <Scan headerOptions={headerOptions} setPage={setCurrentPage} />
+        <Scan headerOptions={headerOptions} setcurrentPage={setCurrentPage} />
       )}
-      {page === "content" && (
+      {currentPage === "content" && (
         <Content headerOptions={headerOptions} setPage={setCurrentPage} />
       )}
     </>