first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,151 @@
|
||||
.terminalsBox {
|
||||
position: relative;
|
||||
}
|
||||
.monthlyEarning {
|
||||
background: #757FEF;
|
||||
mix-blend-mode: multiply;
|
||||
box-shadow: 0px 109px 80px rgb(132 13 226 / 14%), 0px 45.5376px 33.4221px rgb(132 13 226 / 10%), 0px 24.3466px 17.869px rgb(132 13 226 / 8%), 0px 13.6485px 10.0172px rgb(132 13 226 / 7%), 0px 7.24861px 5.32008px rgb(132 13 226 / 6%), 0px 3.01631px 2.21381px rgb(132 13 226 / 4%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 75px;
|
||||
position: relative;
|
||||
right: -55px;
|
||||
top: 40px;
|
||||
}
|
||||
.monthlyEarning h3 {
|
||||
margin: 0 0 10px;
|
||||
line-height: 1;
|
||||
color: #fff !important;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
}
|
||||
.monthlyEarning p {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.usersEarning {
|
||||
background: #F765A3;
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 0.8;
|
||||
box-shadow: 0px 100px 80px rgb(255 43 43 / 15%), 0px 46.233px 36.9864px rgb(255 43 43 / 11%), 0px 26.4535px 21.1628px rgb(255 43 43 / 9%), 0px 16.0571px 12.8457px rgb(255 43 43 / 8%), 0px 9.67509px 7.74008px rgb(255 43 43 / 7%), 0px 5.38772px 4.31018px rgb(255 43 43 / 6%), 0px 2.31722px 1.85378px rgb(255 43 43 / 4%);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
padding-top: 40px;
|
||||
left: -160px;
|
||||
right: 0;
|
||||
top: 130px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
}
|
||||
.usersEarning h3 {
|
||||
margin: 0 0 10px;
|
||||
line-height: 1;
|
||||
color: #fff !important;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
}
|
||||
.usersEarning p {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inactiveEarning {
|
||||
top: 210px;
|
||||
background: #FF8A54;
|
||||
mix-blend-mode: multiply;
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
padding-top: 25px;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.inactiveEarning h3 {
|
||||
margin: 0 0 5px;
|
||||
line-height: 1;
|
||||
color: #fff !important;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
.inactiveEarning p {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.terminalsBox ul {
|
||||
margin: 133px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
.terminalsBox ul li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
padding-left: 20px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.terminalsBox ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.terminalsBox ul li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
}
|
||||
.terminalsBox ul li:nth-child(1)::before {
|
||||
background: #757FEF;
|
||||
}
|
||||
.terminalsBox ul li:nth-child(2)::before {
|
||||
background: #F765A3;
|
||||
}
|
||||
.terminalsBox ul li:nth-child(3)::before {
|
||||
background: #FF8A54;
|
||||
}
|
||||
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .terminalsBox ul li {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
margin-right: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
[dir="rtl"] .terminalsBox ul li:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="rtl"] .terminalsBox ul li::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .monthlyEarning {
|
||||
mix-blend-mode: initial;
|
||||
}
|
||||
[class="dark"] .usersEarning {
|
||||
mix-blend-mode: initial;
|
||||
}
|
||||
[class="dark"] .inactiveEarning {
|
||||
mix-blend-mode: initial;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import styles from "@/components/Dashboard/Analytics/Terminals/Terminals.module.css";
|
||||
|
||||
const Terminals = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Terminals
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<div className={styles.terminalsBox}>
|
||||
<div className={styles.monthlyEarning}>
|
||||
<h3>$27632</h3>
|
||||
<p>Monthly Earning</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.usersEarning}>
|
||||
<h3>82.9k</h3>
|
||||
<p>Users</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.inactiveEarning}>
|
||||
<h3>0.9k</h3>
|
||||
<p>Inactive</p>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Monthly Earning</li>
|
||||
<li>Users</li>
|
||||
<li>Inactive</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Terminals;
|
||||
Reference in New Issue
Block a user