DESKTOP-GBA0BK8\Admin
242 lines
6.2 KiB
JavaScript
242 lines
6.2 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Box, Typography } from "@mui/material";
|
|
import Link from "@mui/material/Link";
|
|
import dynamic from "next/dynamic";
|
|
const Chart = dynamic(() => import("react-apexcharts"), {
|
|
ssr: false,
|
|
});
|
|
|
|
class CourseCompletionList extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
series: [25],
|
|
series2: [50],
|
|
series3: [30],
|
|
series4: [50],
|
|
options: {
|
|
chart: {
|
|
offsetX: -8,
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: "50%",
|
|
},
|
|
track: {
|
|
background: "#A9C8FB",
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
},
|
|
value: {
|
|
offsetY: 3,
|
|
color: "#757FEF",
|
|
fontSize: "13px",
|
|
fontWeight: "500",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
colors: ["#757FEF"],
|
|
opacity: 1,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
{/* Course completion 1 */}
|
|
<Box
|
|
sx={{
|
|
background: "#FAFAFA",
|
|
borderRadius: "15px",
|
|
padding: "5px 20px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
mt: "15px",
|
|
}}
|
|
className="dark-BG-101010"
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Box className="mr-1">
|
|
<Chart
|
|
options={this.state.options}
|
|
series={this.state.series}
|
|
type="radialBar"
|
|
height={110}
|
|
width={70}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Typography as="h3" fontSize="14px" fontWeight="500">
|
|
Data With Python
|
|
</Typography>
|
|
<Typography fontSize="13px" color="#A9A9C8">
|
|
5 Lessons
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box color="#A9A9C8" fontSize="25px">
|
|
<Link href="#" underline="none">
|
|
<i className="ri-arrow-right-s-line"></i>
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Course completion 2 */}
|
|
<Box
|
|
sx={{
|
|
background: "#FAFAFA",
|
|
borderRadius: "15px",
|
|
padding: "5px 20px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
mt: "15px",
|
|
}}
|
|
className="dark-BG-101010"
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Chart
|
|
options={this.state.options}
|
|
series={this.state.series2}
|
|
type="radialBar"
|
|
height={110}
|
|
width={70}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Typography as="h3" fontSize="14px" fontWeight="500">
|
|
Code Foundation
|
|
</Typography>
|
|
<Typography fontSize="13px" color="#A9A9C8">
|
|
15 Lessons
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box color="#A9A9C8" fontSize="25px">
|
|
<Link href="#" underline="none">
|
|
<i className="ri-arrow-right-s-line"></i>
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Course completion 3 */}
|
|
<Box
|
|
sx={{
|
|
background: "#FAFAFA",
|
|
borderRadius: "15px",
|
|
padding: "5px 20px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
mt: "15px",
|
|
}}
|
|
className="dark-BG-101010"
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Chart
|
|
options={this.state.options}
|
|
series={this.state.series3}
|
|
type="radialBar"
|
|
height={110}
|
|
width={70}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Typography as="h3" fontSize="14px" fontWeight="500">
|
|
Styling With CSS
|
|
</Typography>
|
|
<Typography fontSize="13px" color="#A9A9C8">
|
|
13 Lessons
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box color="#A9A9C8" fontSize="25px">
|
|
<Link href="#" underline="none">
|
|
<i className="ri-arrow-right-s-line"></i>
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Course completion 4 */}
|
|
<Box
|
|
sx={{
|
|
background: "#FAFAFA",
|
|
borderRadius: "15px",
|
|
padding: "5px 20px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
mt: "15px",
|
|
}}
|
|
className="dark-BG-101010"
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Chart
|
|
options={this.state.options}
|
|
series={this.state.series4}
|
|
type="radialBar"
|
|
height={110}
|
|
width={70}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Typography as="h3" fontSize="14px" fontWeight="500">
|
|
Code Learn
|
|
</Typography>
|
|
<Typography fontSize="13px" color="#A9A9C8">
|
|
15 Lessons
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box color="#A9A9C8" fontSize="25px">
|
|
<Link href="#" underline="none">
|
|
<i className="ri-arrow-right-s-line"></i>
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CourseCompletionList;
|