162 lines
3.6 KiB
TypeScript
162 lines
3.6 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 Select from "@mui/material/Select";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import FormControl from "@mui/material/FormControl";
|
|
import InputLabel from "@mui/material/InputLabel";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
export default function SessionsChart() {
|
|
const [selectedStation, setSelectedStation] = React.useState(
|
|
"Delhi NCR EV Station"
|
|
);
|
|
|
|
const handleChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
|
|
setSelectedStation(event.target.value);
|
|
};
|
|
|
|
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>
|
|
|
|
{/* Dropdown button */}
|
|
<FormControl
|
|
sx={{
|
|
mt: 2,
|
|
mb: 2,
|
|
width: "100%",
|
|
// backgroundColor: "#202020",
|
|
border: "1px solid #454545",
|
|
borderRadius: "8px",
|
|
}}
|
|
>
|
|
|
|
<Select
|
|
value={selectedStation}
|
|
onChange={handleChange}
|
|
label="Select Station"
|
|
sx={{
|
|
//backgroundColor: "#202020",
|
|
color: "#D9D8D8",
|
|
"& .MuiSvgIcon-root": { color: "#F2F2F2" },
|
|
}}
|
|
IconComponent={ExpandMoreIcon}
|
|
>
|
|
<MenuItem value="Delhi NCR EV Station">
|
|
Delhi NCR EV Station
|
|
</MenuItem>
|
|
<MenuItem value="Mumbai EV Station">
|
|
Mumbai EV Station
|
|
</MenuItem>
|
|
<MenuItem value="Bangalore EV Station">
|
|
Bangalore EV Station
|
|
</MenuItem>
|
|
<MenuItem value="Pune EV Station">
|
|
Pune EV Station
|
|
</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|