select and admin panel

src/components/Admin.tsx

@@ -44,6 +44,45 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
   box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : '')};
   border-bottom: 1px solid #979797;
 `;
+
+const HistoryDiv = styled.div`
+  flex: 1;
+  display: flex;
+  margin-left: 20px;
+  border-radius: 5px;
+  height: calc(100vh - 120px);
+  background-color: red;
+`;
+
+const StatsDiv = styled.div`
+  flex: 1;
+  display: flex;
+  margin-left: 20px;
+  border-radius: 5px;
+  height: calc(100vh - 120px);
+  background-color: blue;
+`;
+
+const LogoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 2;
+  margin-left: 10px;
+`;
+
+const Text = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-size: 5rem;
+  user-select: none;
+`;
+
+const Logo = styled.img`
+  width: 500px;
+  height: 500px;
+`;
+
 const Icon = styled.img`
   width: 40px;
   margin: 5px;
@@ -73,8 +112,21 @@ export const Admin = () => {
         </LeftPanelElement>
       </LeftSide>
       <Wrapper>
-        <Scheduler />
+        {currentTab === 1 ? (
-        <Rightbar />
+          <>
+            <Scheduler />
+            <Rightbar />
+          </>
+        ) : currentTab === 2 ? (
+          <HistoryDiv />
+        ) : currentTab === 3 ? (
+          <StatsDiv />
+        ) : (
+          <LogoWrapper>
+            <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+            <Text> plan na plan </Text>
+          </LogoWrapper>
+        )}
       </Wrapper>
     </Wrap>
   );

src/components/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Topbar from './Topbar';
 import { Transfer } from './Transfer';
+import { Admin } from './Admin';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
 import styled from 'styled-components';

src/components/Topbar.tsx

@@ -140,6 +140,7 @@ export default function ({ handleTransfer }: TopbarProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState('');
+  const [value, setValue] = useState('przedmiot');
 
   const onLangChange = () => setIsPolish(!isPolish);
 
@@ -155,6 +156,8 @@ export default function ({ handleTransfer }: TopbarProps) {
 
   const handleCloseDropdown = () => setOpen(false);
 
+  const Change = (e: any) => setValue(e.target.value);
+
   useEffect(() => {
     if (clearInput) {
       setInput('');
@@ -171,12 +174,12 @@ export default function ({ handleTransfer }: TopbarProps) {
       <FlexboxColumn>
         <ClickAwayListener onClickAway={handleCloseDropdown}>
           <InputWrapper>
-            <SelectSearch>
+            <SelectSearch value={value} onChange={Change}>
-              <SelectOption value="Student">Student</SelectOption>
+              <SelectOption value="przedmiot">Przedmiot</SelectOption>
-              <SelectOption value="Przedmiot">Przedmiot</SelectOption>
+              <SelectOption value="student">Student</SelectOption>
             </SelectSearch>
             <Input
-              placeholder="Wyszukaj przedmiot..."
+              placeholder={`Wyszukaj ${value}...`}
               onChange={handleChange}
               value={input}
               onFocus={() => {