|
|
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/", |
|
|
}, |
|
|
], |
|
|
};
|
|
|
|