59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
|
import React, { useState} from 'react';
|
||
|
|
import styled from 'styled-components/macro';
|
||
|
|
import Plan from '../assets/plan.svg';
|
||
|
|
import History from '../assets/history.svg';
|
||
|
|
import Statistics from '../assets/statistics.svg';
|
||
|
|
|
||
|
|
const LeftSide = styled.div`
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: white;
|
||
|
|
`;
|
||
|
|
|
||
|
|
interface LeftPanelElement{
|
||
|
|
choose:boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const LeftPanelElement = styled.div<LeftPanelElement>`
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex: 1;
|
||
|
|
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
|
||
|
|
padding: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: ${({choose})=>(choose == true ? `blue` : "")};
|
||
|
|
`;
|
||
|
|
const Icon = styled.img`
|
||
|
|
width: 40px;
|
||
|
|
margin: 5px;
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const Admin = () => {
|
||
|
|
|
||
|
|
const[choose, setChoose] = useState(false);
|
||
|
|
|
||
|
|
const handleClick = ()=>{
|
||
|
|
setChoose(true);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<LeftSide>
|
||
|
|
<LeftPanelElement choose={choose} onClick={handleClick}>
|
||
|
|
<Icon alt="profile" src={Plan} />
|
||
|
|
Pokaż plan
|
||
|
|
</LeftPanelElement>
|
||
|
|
<LeftPanelElement choose={choose} onClick={handleClick}>
|
||
|
|
<Icon alt="history" src={History} />
|
||
|
|
Historia Zmian
|
||
|
|
</LeftPanelElement>
|
||
|
|
<LeftPanelElement choose={choose} onClick={handleClick}>
|
||
|
|
<Icon alt="statistics" src={Statistics} />
|
||
|
|
Statystyki
|
||
|
|
</LeftPanelElement>
|
||
|
|
</LeftSide>
|
||
|
|
);
|
||
|
|
};
|