150 lines
3 KiB
TypeScript
150 lines
3 KiB
TypeScript
import * as React from "react";
|
|
import Card from "@mui/material/Card";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import Typography from "@mui/material/Typography";
|
|
import Box from "@mui/material/Box";
|
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
|
|
|
|
|
export default function SessionsChart() {
|
|
return (
|
|
<Card
|
|
variant="outlined"
|
|
sx={{
|
|
width: "553px",
|
|
height: "324px",
|
|
gap: "16px",
|
|
borderRadius: "16px",
|
|
padding: "20px",
|
|
"*:where([data-mui-color-scheme='dark']) &": {
|
|
backgroundColor: "#202020",
|
|
},
|
|
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Typography
|
|
variant="h6"
|
|
align="left"
|
|
color="#F2F2F2"
|
|
width="132px"
|
|
height="24px"
|
|
gap={"12px"}
|
|
sx={{
|
|
fontFamily: "Gilroy",
|
|
fontWeight: 500,
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
letterSpacing: "0%",
|
|
color: "#FAFAFA",
|
|
}}
|
|
>
|
|
Charging prices
|
|
</Typography>
|
|
|
|
{/* Responsive dropdown box */}
|
|
<Box
|
|
sx={{
|
|
mt: 2,
|
|
mb: 2,
|
|
backgroundColor: "#202020",
|
|
fontSize: "14px",
|
|
lineHeight: "20px",
|
|
width: { xs: "100%" },
|
|
height: "48px",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
p: 1.5,
|
|
borderRadius: "8px",
|
|
border: "1px solid #454545",
|
|
}}
|
|
>
|
|
<Typography
|
|
width="134px"
|
|
height="24px"
|
|
sx={{
|
|
fontFamily: "Gilroy",
|
|
fontWeight: 500,
|
|
fontSize: "14px",
|
|
lineHeight: "24px",
|
|
color: "#D9D8D8",
|
|
|
|
}}
|
|
>
|
|
Delhi NCR EV Station
|
|
</Typography>
|
|
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
|
</Box>
|
|
|
|
{/* Grid container for the four boxes */}
|
|
<Box
|
|
sx={{
|
|
display: "grid",
|
|
gridTemplateColumns: {
|
|
xs: "1fr",
|
|
sm: "repeat(2, 1fr)",
|
|
},
|
|
gap: { xs: 1, sm: 2 },
|
|
maxWidth: "750px",
|
|
width: "100%",
|
|
mx: "auto",
|
|
}}
|
|
>
|
|
{[1, 2, 3, 4].map((item) => (
|
|
<Box
|
|
key={item}
|
|
sx={{
|
|
height: "84px",
|
|
borderRadius: "8px",
|
|
p: "12px 16px",
|
|
backgroundColor: "#272727",
|
|
color: "#D9D8D8",
|
|
}}
|
|
>
|
|
<Typography
|
|
component="h1"
|
|
variant="body2"
|
|
width="98px"
|
|
height="24px"
|
|
fontWeight={400}
|
|
fontSize={"14px"}
|
|
lineHeight={"24px"}
|
|
gutterBottom
|
|
>
|
|
Basic Charging
|
|
</Typography>
|
|
<Box display={"flex"} gap={1}>
|
|
<Typography
|
|
component="h1"
|
|
variant="subtitle2"
|
|
color="#FFFFFF"
|
|
width="40px"
|
|
height={"24px"}
|
|
fontWeight={500}
|
|
fontSize="18px"
|
|
lineHeight="24px"
|
|
gutterBottom
|
|
>
|
|
16.83
|
|
</Typography>
|
|
|
|
<Typography
|
|
width="71px"
|
|
height="24px"
|
|
gap="2px"
|
|
fontWeight={400}
|
|
fontSize={"14px"}
|
|
lineHeight={"24px"}
|
|
>
|
|
cents/kWh
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|