admin panel began

src/components/Admin.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+};

src/components/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from 'react';
 import Topbar from './Topbar';
+import {Admin} from './Admin';
 import { Transfer } from './Transfer';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
@@ -9,7 +10,6 @@ const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
   background-color: #ECEEF4;
-  padding:  20px;
 `;
 
 export const App = () => {
@@ -24,8 +24,9 @@ export const App = () => {
       <Topbar handleTransfer={handleTransfer} />
       <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
       <Wrapper>
-        <Scheduler />
-        <Rightbar />
+        <Admin/>
+        {/* <Scheduler />
+        <Rightbar /> */}
       </Wrapper>
     </>
   );

src/components/Scheduler.tsx

@@ -11,6 +11,7 @@ const SchedulerWrapper = styled.div`
   padding: 10px 40px 25px 10px;
   border-radius: 5px;
   margin-right: 20px;
+  margin-left:20px;
   flex-direction: column;
   justify-content: center;
   align-items: center;

src/components/Topbar.tsx

@@ -1,6 +1,4 @@
 import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
-import Transfer from '../assets/transfer.png';
-import Search from '../assets/search.svg';
 import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
@@ -103,10 +101,6 @@ const Icon = styled.img`
   }
 `;
 
-
-
-
-
 interface TopbarProps {
   handleTransfer: (e: MouseEvent) => void;
 }