You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

154 lines
4.4 KiB

import React, { useState } from "react";
import { connect } from "react-redux";
//components
import PDF from "./PDF";
import Link from "./Link";
import Voice from "./Voice";
// import WaveAudio from "../../../../../components/Wave";
//assets
import olum2Image from "../../../../../../assets/images/olum-2.svg";
const Identifier = ({ item, activeType }) => {
return (
<>
{activeType === "all" ? (
<>
{item.type === "voice" ? <Voice voice={item} /> : null}
{item.type === "link" ? <Link link={item} /> : null}
{item.type === "pdf" ? <PDF pdf={item} /> : null}
</>
) : (
<>
{item.type === "voice" && item.type === activeType ? (
<Voice voice={item} />
) : null}
{item.type === "link" && item.type === activeType ? (
<Link link={item} />
) : null}
{item.type === "pdf" && item.type === activeType ? (
<PDF pdf={item} />
) : null}
</>
)}
</>
);
};
function QrResult({ book, grades, checked, dataTypes, list }) {
const [activeType, setActivetType] = useState("all");
return (
<div
className="relative w-full h-full min-h-full transform flex flex-col px-2 pt-10 bg-white"
onClick={(e) => e.stopPropagation()}
>
<div className="w-full flex items-center">
<img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
<div className="flex flex-col">
<h1 className="font-semibold text-primary">{book.name}</h1>
{book?.grade ? (
<strong className="text-blueC0 font-light mt-2 text-sm">
{"پایه" + " " + grades[book.grade]}
</strong>
) : null}
{book?.page ? (
<p className="mt-1 text-blueC0 text-sm">
{"شما در حال مطالعه صفحه" + " " + book.page + " " + "هستید."}
</p>
) : null}
</div>
</div>
<div
className="flex flex-col justify-start rounded-md border border-blueFE overflow-hidden"
style={{ borderWidth: 1, borderColor: "#C1E0FE", borderStyle: "solid" }}
>
<ul className="w-full flex list-none items-center">
{dataTypes.map((item, index) => (
<li
key={index}
onClick={() => setActivetType(item.type)}
className={`w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300
${
activeType === item.type
? "font-bold bg-blueFF"
: "font-light bg-white"
}
`}
style={{
borderBottom:
activeType === item.type
? "1px solid #E8FCFF"
: "1px solid #C1E0FE",
}}
>
{item.name}
</li>
))}
</ul>
<div className="px-2 py-3 w-full flex flex-col">
{list.map((item, index) => (
<Identifier item={item} key={index} activeType={activeType} />
))}
</div>
</div>
</div>
);
}
export default connect((state) => ({
grades: state.publicApi.grades,
}))(QrResult);
QrResult.defaultProps = {
book: {
name: "علوم اجتماعی",
page: 67,
grade: 2,
imageUrl: olum2Image,
},
dataTypes: [
{
name: "تمامی محتواها",
type: "all",
},
{
name: "صوت",
type: "voice",
},
{
name: "ویدئو",
type: "video",
},
{
name: "پی دی اف",
type: "pdf",
},
{
name: "پاورپوینت",
type: "ppt",
},
{
name: "لینکها",
type: "link",
},
],
list: [
{
name: "استاد رضایی فصل پنجم",
type: "voice",
value:
"https://assets.mixkit.co/sfx/preview/mixkit-fast-rocket-whoosh-1714.mp3",
},
{
name: "فایل پی دی اف تمارین مربوط به درس چهاردهم",
type: "pdf",
value:
"https://smallpdf.com/handle-widget#url=https://assets.ctfassets.net/l3l0sjr15nav/29D2yYGKlHNm0fB2YM1uW4/8e638080a0603252b1a50f35ae8762fd/Get_Started_With_Smallpdf.pdf",
},
{
name: "لینک مربوط به محتوای یک چیز نامعلوم است",
type: "link",
value: "https://www.aparat.com/",
},
],
};