78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
"use client";
|
||
import { DTLToken } from "@/contracts";
|
||
import { COURSES } from "@/mockData";
|
||
import { useState } from "react";
|
||
import { useContractWrite, usePrepareContractWrite } from "wagmi";
|
||
import styles from "./page.module.css";
|
||
|
||
const Step = ({ label }) => {
|
||
const [isCompleted, setIsCompleted] = useState(false);
|
||
|
||
return (
|
||
<div className={styles.step} onClick={() => setIsCompleted((val) => !val)}>
|
||
<input type="checkbox" checked={isCompleted} />
|
||
<span style={{ marginLeft: "0.5rem" }}>{label}</span>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const LearnPage = ({ params }) => {
|
||
const course = COURSES.find((c) => c.slug === params.courseSlug);
|
||
|
||
const { config: finishCourseConfig } = usePrepareContractWrite({
|
||
address: DTLToken.address,
|
||
abi: DTLToken.abi,
|
||
functionName: "finishCourse",
|
||
args: [
|
||
course.id,
|
||
"Osman Nuri Yıldız",
|
||
"Akıllı Kontrat Güvenliği",
|
||
"Atıl Samancıoğlu",
|
||
],
|
||
});
|
||
const finishCourse = useContractWrite(finishCourseConfig);
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<div className={styles.videoContainer}>
|
||
<iframe
|
||
src="https://www.youtube.com/embed/r3P58Y1OL0g"
|
||
// frameBorder="0"
|
||
allow="autoplay; encrypted-media"
|
||
allowFullScreen
|
||
className={styles.video}
|
||
></iframe>
|
||
</div>
|
||
|
||
<div className={styles.sidebar}>
|
||
<div className={styles.courseContainer}>
|
||
<h2>Kurs İçeriği</h2>
|
||
<div className={styles.courseContent}>
|
||
<Step label="1. Blokzincir Nedir?" />
|
||
<Step label="2. Kullanım Alanları" />
|
||
<Step label="3. Ethereum Nedir?" />
|
||
<Step label="4. Akıllı Kontratlar" />
|
||
<Step label="5. Solidity Programlama Dili" />
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary"
|
||
style={{
|
||
marginTop: "2rem",
|
||
marginLeft: "auto",
|
||
marginRight: "auto",
|
||
display: "block",
|
||
}}
|
||
onClick={() => finishCourse.write?.()}
|
||
>
|
||
Sertifikayı Al
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LearnPage;
|