first commit

2023-10-14 22:02:57 -04:00
commit 5f95d857d4
783 changed files with 112323 additions and 0 deletions
@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+import styles from "@/components/Dashboard/SaasApp/Profile/ImpressionShare.module.css";
+
+class ImpressionShare extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      series: [45],
+      options: {
+        chart: {
+          type: "radialBar",
+          offsetY: -20,
+          sparkline: {
+            enabled: true,
+          },
+        },
+        plotOptions: {
+          radialBar: {
+            startAngle: -110,
+            endAngle: 110,
+            track: {
+              background: "#e7e7e7",
+              strokeWidth: "90%",
+              margin: 5,
+            },
+            dataLabels: {
+              name: {
+                show: false,
+              },
+              value: {
+                offsetY: 1,
+                fontSize: "15px",
+                fontWeight: "600",
+                color: "#5B5B98",
+              },
+            },
+          },
+        },
+        grid: {
+          padding: {
+            top: -10,
+          },
+        },
+        fill: {
+          colors: ["#2DB6F5"],
+        },
+        labels: ["Average Results"],
+      },
+    };
+  }
+
+  render() {
+    return (
+      <>
+        <div className={styles.chartBox}>
+          <Chart
+            options={this.state.options}
+            series={this.state.series}
+            type="radialBar"
+            height={150}
+          />
+          <p>Excellent</p>
+          <h3>Impression Share</h3>
+        </div>
+      </>
+    );
+  }
+}
+
+export default ImpressionShare;
@@ -0,0 +1,29 @@
+.chartBox {
+  text-align: center;
+  top: 12px;
+  position: relative;
+}
+.chartBox h3 {
+  margin: 0;
+  color: #5B5B98;
+  font-weight: 500;
+  font-size: 13px;
+  position: relative;
+  bottom: 7px;
+}
+.chartBox p {
+  position: absolute;
+  margin: 0;
+  left: 0;
+  right: 0;
+  bottom: 28px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #2DB6F5;
+}
+
+@media only screen and (max-width: 767px) {
+  .chartBox h3 {
+    font-size: 10px;
+  }
+}
@@ -0,0 +1,42 @@
+import React from "react";
+import Grid from "@mui/material/Grid"; 
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
+import ImpressionShare from "./ImpressionShare";
+
+const Profile = () => {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px 20px",
+          mb: "15px",
+        }}
+      >
+        <Grid container alignItems="center" rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
+          <Grid item xs={6} sm={8}>
+            <img
+              src="/images/member10.png"
+              alt="Profile image"
+              style={{ width: "60px", height: "60px", marginBottom: "20px" }}
+            />
+
+            <Typography variant="h3" fontSize={16} fontWeight="500" mb="5px">
+              Andrew Burns
+            </Typography>
+
+            <Typography variant="p">Programmer</Typography>
+          </Grid>
+
+          <Grid item xs={6} sm={4}>
+            <ImpressionShare />
+          </Grid>
+        </Grid>
+      </Card>
+    </>
+  );
+};
+
+export default Profile;