Skip to content

Commit

Permalink
task manager
Browse files Browse the repository at this point in the history
  • Loading branch information
matinturkaman committed Nov 16, 2021
1 parent a249b1b commit 1092ed0
Show file tree
Hide file tree
Showing 16 changed files with 49,681 additions and 10,082 deletions.
37,684 changes: 37,684 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,19 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^1.0.17",
"@chakra-ui/react": "^1.6.12",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"framer-motion": "^4.1.17",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-toast": "^2.1.1",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
Expand Down
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

86 changes: 66 additions & 20 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,71 @@
import logo from './logo.svg';
import './App.css';
import { Button } from "@chakra-ui/button";
import { Box, Container, Flex, Text } from "@chakra-ui/layout";
import React from "react";
import Main from "./components/main";
import SideBar from "./components/SideBar";
import { MdOutlineWbSunny } from "react-icons/md";
import { useColorMode, useColorModeValue } from "@chakra-ui/color-mode";

const App = () => {
const { toggleColorMode } = useColorMode();
const mainBackground = useColorModeValue("white", "gray.800");
const mainColor = useColorModeValue("black", "white");
const mainCardBackground = useColorModeValue("gray.100", "gray.700");
const sideBarBackground = useColorModeValue("gray.100", "gray.700");
const sideBarCardBackground = useColorModeValue("white", "gray.600");
const sideBarAnOtherCardBackground = useColorModeValue(
"gray.100",
"gray.700"
);
const sideBarAnOtherCardColor = useColorModeValue("blackAlpha.500", "white");

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Container height="full" maxW="container.3xl" p="0">
<Flex justifyContent="space-between">
<Flex flexDirection="column">
<Box
w={{
base: "50px",
sm: "100px",
md: "250px",
lg: "200px",
xl: "auto",
}}
pos="static"
>
<SideBar
sideBarBackground={sideBarBackground}
sideBarCardBackground={sideBarCardBackground}
sideBarAnOtherCardBackground={sideBarAnOtherCardBackground}
sideBarAnOtherCardColor={sideBarAnOtherCardColor}
/>
</Box>
<Button
w={{ base: "30", md: "auto", lg: "auto", xl: "auto" }}
rounded="0"
as="a"
cursor="pointer"
bg={sideBarBackground}
fontWeight="normal"
leftIcon={<MdOutlineWbSunny />}
onClick={toggleColorMode}
position="fixed"
>
<Text
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
Dark mode
</Text>
</Button>
</Flex>
<Main
mainBackground={mainBackground}
mainColor={mainColor}
mainCardBackground={mainCardBackground}
/>
</Flex>
</Container>
);
}
};

export default App;
8 changes: 0 additions & 8 deletions src/App.test.js

This file was deleted.

193 changes: 193 additions & 0 deletions src/components/SideBar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
import { Avatar, AvatarBadge } from "@chakra-ui/avatar";
import { Box, Link, Text } from "@chakra-ui/layout";
import React from "react";
import { CgNotes } from "react-icons/cg";
import { RiTodoLine } from "react-icons/ri";
import { AiOutlineCheck } from "react-icons/ai";
import { BsPencil, BsBook } from "react-icons/bs";
import Card from "./common/Card";
import { ArrowUpDownIcon } from "@chakra-ui/icons";

const SideBar = ({
sideBarBackground,
sideBarCardBackground,
sideBarAnOtherCardBackground,
sideBarAnOtherCardColor,
}) => {
return (
<Box
flex={1}
w={{ base: "80px", md: "auto", lg: "auto", xl: "auto" }}
bg={sideBarBackground}
p="8"
height="100vh"
display="flex"
position="fixed"
alignItems="center"
flexDirection="column"
>
<Link focus={{}} href="https://github.com/matinturkaman" isExternal>
<Card
display="flex"
alignItems="center"
justifyContent="space-evenly"
width="full"
height="55px"
bg={sideBarCardBackground}
borderRadius="8px"
cursor="pointer"
>
<Avatar
name="matin turkaman"
w="40px"
h="40px"
src="https://avatars.githubusercontent.com/u/79017406?v=4"
>
<AvatarBadge
boxSize={{ base: "1rem", md: ".80em", lg: ".80em", xl: ".80em" }}
bg="green.500"
/>
</Avatar>
<Text
fontWeight="medium"
ml="1"
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
matin turkaman
</Text>
<ArrowUpDownIcon
ml="2"
size="30"
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
/>
</Card>
</Link>
<Card
display="flex"
alignItems="center"
mt="70"
width={{ base: "55px", md: "full", lg: "full", xl: "full" }}
height="40px"
bg={sideBarCardBackground}
borderRadius="8px"
justifyContent="space-between"
cursor="pointer"
>
<Box display="flex" alignItems="center">
<Text ml="2">
<CgNotes size="20" />
</Text>
<Text
fontWeight="medium"
ml="2"
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
My Notes
</Text>
</Box>
</Card>
<Card
display="flex"
alignItems="center"
mt="5"
width={{ base: "55px", md: "full", lg: "full", xl: "full" }}
height="40px"
bg={sideBarAnOtherCardBackground}
borderRadius="8px"
justifyContent="space-between"
cursor="pointer"
>
<Box display="flex" alignItems="center">
<Text ml="2" color={sideBarAnOtherCardColor}>
<AiOutlineCheck size="20" />
</Text>
<Text
fontWeight="medium"
ml="2"
color={sideBarAnOtherCardColor}
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
To-do list
</Text>
</Box>
</Card>
<Card
display="flex"
alignItems="center"
mt="5"
width={{ base: "55px", md: "full", lg: "full", xl: "full" }}
height="40px"
bg={sideBarAnOtherCardBackground}
borderRadius="8px"
justifyContent="space-between"
cursor="pointer"
>
<Box display="flex" alignItems="center">
<Text ml="2" color={sideBarAnOtherCardColor}>
<RiTodoLine size="20" />
</Text>
<Text
fontWeight="medium"
ml="2"
color={sideBarAnOtherCardColor}
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
projects
</Text>
</Box>
</Card>
<Card
display="flex"
alignItems="center"
mt="5"
width={{ base: "55px", md: "full", lg: "full", xl: "full" }}
height="40px"
bg={sideBarAnOtherCardBackground}
borderRadius="8px"
justifyContent="space-between"
cursor="pointer"
>
<Box display="flex" alignItems="center">
<Text ml="2" color={sideBarAnOtherCardColor}>
<BsPencil size="20" />
</Text>
<Text
fontWeight="medium"
ml="2"
color={sideBarAnOtherCardColor}
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
journal
</Text>
</Box>
</Card>
<Card
display="flex"
alignItems="center"
mt="5"
width={{ base: "55px", md: "full", lg: "full", xl: "full" }}
height="40px"
bg={sideBarAnOtherCardBackground}
borderRadius="8px"
justifyContent="space-between"
cursor="pointer"
>
<Box display="flex" alignItems="center">
<Text ml="2" color={sideBarAnOtherCardColor}>
<BsBook size="20" />
</Text>
<Text
fontWeight="medium"
ml="2"
color={sideBarAnOtherCardColor}
display={{ base: "none", md: "block", lg: "block", xl: "block" }}
>
Reading list
</Text>
</Box>
</Card>
</Box>
);
};

export default SideBar;
Loading

1 comment on commit 1092ed0

@vercel
Copy link

@vercel vercel bot commented on 1092ed0 Nov 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.