71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import styled from "@emotion/styled";
|
|
import { AttractionWidgetContainer } from "../attractions-widget/AttractionWidgetContainer";
|
|
import { WeatherWidgetContainer } from "../WeatherWidget/WeatherWidgetContainer";
|
|
import { OperativeInfoWidget } from "../operative-info-widget/operative-info-widget";
|
|
import { NavWidgetContainer } from "../nav-widget/nav-widget-container";
|
|
import { MapWidgetContainer } from "../MapWidgetContainer";
|
|
import { RouteInfoWidgetContainer } from "../RouteInfoWidgetContainer/RouteInfoWidgetContainer";
|
|
|
|
const StyledDashboard = styled.div`
|
|
background-color: #000;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
.nav-widget--opened + .container {
|
|
margin-left: 290px;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
margin-left: 0;
|
|
|
|
transition: margin-left ease-in-out 0.3s;
|
|
|
|
.left-top-wrapper {
|
|
position: absolute;
|
|
.route-number {
|
|
margin: 32px;
|
|
}
|
|
|
|
.weather-widget {
|
|
margin: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-sidebar {
|
|
flex-shrink: 0;
|
|
}
|
|
`;
|
|
|
|
export function Dashboard() {
|
|
return (
|
|
<StyledDashboard>
|
|
<NavWidgetContainer />
|
|
|
|
<div className="container">
|
|
<div className="left-top-wrapper">
|
|
<RouteInfoWidgetContainer className="route-number" />
|
|
<WeatherWidgetContainer className="weather-widget" />
|
|
</div>
|
|
|
|
<MapWidgetContainer />
|
|
|
|
<OperativeInfoWidget />
|
|
</div>
|
|
|
|
<div className="right-sidebar">
|
|
<AttractionWidgetContainer />
|
|
</div>
|
|
</StyledDashboard>
|
|
);
|
|
}
|