FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/LMSCourses/CourseCompletion/CourseCompletionList.js
+241
View File
@@ -0,0 +1,241 @@
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;