114 lines
2.3 KiB
TypeScript
114 lines
2.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: "100%",
|
||
height: "100%",
|
||
backgroundColor: "#202020",
|
||
p: 2,
|
||
}}
|
||
>
|
||
<CardContent>
|
||
<Typography
|
||
variant="h6"
|
||
align="left"
|
||
color="#F2F2F2"
|
||
sx={{
|
||
fontFamily: "Gilroy",
|
||
fontWeight: 500,
|
||
fontSize: "18px",
|
||
lineHeight: "24px",
|
||
}}
|
||
>
|
||
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
|
||
sx={{
|
||
fontFamily: "Gilroy",
|
||
fontWeight: 500,
|
||
fontSize: "14px",
|
||
lineHeight: "24px",
|
||
color: "#F2F2F2",
|
||
p: "4px",
|
||
}}
|
||
>
|
||
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",
|
||
}}
|
||
>
|
||
{/* You can map over your data here; for simplicity, we’re using static boxes */}
|
||
{[1, 2, 3, 4].map((item) => (
|
||
<Box
|
||
key={item}
|
||
sx={{
|
||
height: "84px",
|
||
borderRadius: "8px",
|
||
p: "12px 16px",
|
||
backgroundColor: "#272727",
|
||
color: "#F2F2F2",
|
||
}}
|
||
>
|
||
<Typography
|
||
component="h1"
|
||
variant="body2"
|
||
gutterBottom
|
||
>
|
||
Basic Charging
|
||
</Typography>
|
||
<Typography
|
||
component="h1"
|
||
variant="subtitle2"
|
||
gutterBottom
|
||
>
|
||
16.83 cents/kWh
|
||
</Typography>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|