108 lines
3.8 KiB
JavaScript
108 lines
3.8 KiB
JavaScript
import React, { useRef, useState } from "react";
|
|
import UserLayout from "./Layout/UserLayout";
|
|
|
|
import MDEditor from "@uiw/react-md-editor";
|
|
import ReactPlayer from "react-player";
|
|
import { Link } from "@inertiajs/react";
|
|
import Swal from "sweetalert2";
|
|
import HitApi from "../../Utils/HitApi";
|
|
|
|
const Module = (props) => {
|
|
const [markdown, setMarkdown] = useState(props.data.materi);
|
|
|
|
const { materi_selanjutnya } = props;
|
|
|
|
const [isLike, setIsLike] = useState(props.isLike);
|
|
|
|
const setValue = (value) => {
|
|
setMarkdown(value);
|
|
};
|
|
|
|
const handleSukai = () => {
|
|
// Swal.fire({
|
|
// title: "Loading",
|
|
// html: '<div class="body-loading"><div class="loadingspinner"></div></div>', // add html attribute if you want or remove
|
|
// allowOutsideClick: false,
|
|
// showConfirmButton: false,
|
|
// });
|
|
|
|
|
|
HitApi({
|
|
url: "/api/v1/materi/like",
|
|
method: "POST",
|
|
body: {
|
|
id: props.data.id,
|
|
id_user: props.idUser,
|
|
},
|
|
onSuccess: () => {
|
|
setIsLike(!isLike);
|
|
|
|
// Swal.close();
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<UserLayout showBack={true} title={props.data.name} showNavbar={false}>
|
|
<div className="w-full flex flex-col py-4 container mt-6">
|
|
<div className="w-full">
|
|
<ReactPlayer
|
|
width={"100%"}
|
|
controls
|
|
url={props.data.video}
|
|
/>
|
|
</div>
|
|
<div data-color-mode="light" className="text-base mt-4">
|
|
{/* <MDEditor
|
|
value={markdown}
|
|
highlightEnable={false}
|
|
minHeight={'100%'}
|
|
onChange={setValue}
|
|
/> */}
|
|
<MDEditor.Markdown
|
|
style={{
|
|
fontSize: 30,
|
|
}}
|
|
className="min-h-[200px] p-4"
|
|
source={markdown}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center mt-4 justify-between">
|
|
<button
|
|
onClick={() => {
|
|
handleSukai();
|
|
}}
|
|
className={`btn ${
|
|
isLike ? "btn-primary" : "btn-outline"
|
|
}`}
|
|
>
|
|
{isLike ? "Disukai" : "Sukai"}
|
|
</button>
|
|
{materi_selanjutnya && (
|
|
<div className=" flex justify-end">
|
|
<Link
|
|
href={`/user/${
|
|
materi_selanjutnya.kategori == "materi"
|
|
? "materi"
|
|
: "quiz"
|
|
}/${materi_selanjutnya.id}`}
|
|
>
|
|
<div className="bg-primary text-white flex flex-col justify-end items-end px-6 py-2 cursor-pointer">
|
|
<div className="font-semibold">
|
|
Materi selanjutnya
|
|
</div>
|
|
<div className="text-xs">
|
|
{materi_selanjutnya.name}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</UserLayout>
|
|
);
|
|
};
|
|
|
|
export default Module;
|