frontend/src/components/Admin.tsx

82 lines
2.1 KiB
TypeScript
Raw Normal View History

2020-11-24 19:01:20 +01:00
import React, { useState, MouseEvent } from 'react';
2020-11-20 16:55:37 +01:00
import styled from 'styled-components/macro';
import Plan from '../assets/plan.svg';
import History from '../assets/history.svg';
import Statistics from '../assets/statistics.svg';
2020-11-20 20:39:36 +01:00
import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar';
2020-11-20 16:55:37 +01:00
const LeftSide = styled.div`
height: 100%;
display: flex;
2020-11-24 19:01:20 +01:00
flex: 1;
2020-11-20 16:55:37 +01:00
flex-direction: column;
background-color: white;
`;
2020-11-20 20:39:36 +01:00
const Wrap = styled.div`
display: flex;
2020-11-22 17:22:13 +01:00
height: calc(100vh - 120px);
2020-11-24 19:01:20 +01:00
background-color: #eceef4;
width: 100%;
2020-11-20 20:39:36 +01:00
`;
const Wrapper = styled.div`
2020-11-24 19:01:20 +01:00
flex: 12;
2020-11-20 20:39:36 +01:00
display: flex;
2020-11-22 17:22:13 +01:00
height: calc(100vh - 120px);
2020-11-24 19:01:20 +01:00
background-color: #eceef4;
2020-11-20 20:39:36 +01:00
`;
2020-11-24 19:01:20 +01:00
interface LeftPanelElement {
isCurrentTab: boolean;
2020-11-20 16:55:37 +01:00
}
const LeftPanelElement = styled.div<LeftPanelElement>`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
2020-11-20 20:39:36 +01:00
//box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
2020-11-20 16:55:37 +01:00
padding: 20px;
cursor: pointer;
2020-11-24 19:01:20 +01:00
box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : '')};
border-bottom: 1px solid #979797;
2020-11-20 16:55:37 +01:00
`;
const Icon = styled.img`
width: 40px;
margin: 5px;
`;
export const Admin = () => {
2020-11-24 19:01:20 +01:00
const [currentTab, setCurrentTab] = useState<null | number>(null);
2020-11-20 16:55:37 +01:00
2020-11-24 19:01:20 +01:00
const handleClick = (e: MouseEvent<HTMLDivElement>) => {
setCurrentTab(Number(e.currentTarget.id));
};
2020-11-20 16:55:37 +01:00
return (
2020-11-20 20:39:36 +01:00
<Wrap>
2020-11-24 19:01:20 +01:00
<LeftSide>
<LeftPanelElement id={'1'} isCurrentTab={currentTab === 1} onClick={handleClick}>
<Icon alt="profile" src={Plan} />
Pokaż plan
</LeftPanelElement>
<LeftPanelElement id={'2'} isCurrentTab={currentTab === 2} onClick={handleClick}>
<Icon alt="history" src={History} />
Historia Zmian
</LeftPanelElement>
<LeftPanelElement id={'3'} isCurrentTab={currentTab === 3} onClick={handleClick}>
<Icon alt="statistics" src={Statistics} />
Statystyki
</LeftPanelElement>
</LeftSide>
<Wrapper>
<Scheduler />
<Rightbar />
</Wrapper>
2020-11-20 20:39:36 +01:00
</Wrap>
2020-11-20 16:55:37 +01:00
);
};