feat: add calendar tab

Author: debater-coder

src/components/Routes/Routes.tsx

@@ -11,6 +11,7 @@ import Empty from "../Empty";
 import { SmileyXEyes } from "phosphor-react";
 import { lazy, ReactNode, Suspense } from "react";
 import { Flex, Spinner } from "@chakra-ui/react";
+import { Calendar } from "../../routes/Main/Calendar";
 
 const Main = lazy(() => import("../../routes/Main"));
 const Landing = lazy(() => import("../../routes/Landing"));
@@ -57,14 +58,15 @@ export default () => (
         }
       >
         <Route index element={<Home />} />
+        <Route path={"barcodes"} element={<Barcodes />} />
+        <Route path={"announcements"} element={<Announcements />} />
+        <Route path={"calendar"} element={<Calendar />} />
         <Route path={"settings/*"} element={<Settings />}>
           <Route path={"general"} element={<General />} />
           <Route path={"developers"} element={<Developers />} />
           <Route path={"about"} element={<About />} />
           <Route index element={<Navigate to="general" replace={true} />} />
         </Route>
-        <Route path={"barcodes"} element={<Barcodes />} />
-        <Route path={"announcements"} element={<Announcements />} />
         <Route path="*" element={<PageNotFound />} />
       </Route>
       <Route path="*" element={<PageNotFound />} />

src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import SidebarButton from "./SidebarButton";
-import { Barcode, House, Megaphone } from "phosphor-react";
+import { Barcode, CalendarBlank, House, Megaphone } from "phosphor-react";
 import { Flex, useColorModeValue } from "@chakra-ui/react";
 
 export default ({
@@ -51,5 +51,14 @@ export default ({
         mirrored
       />
     </Link>
+    <Link to={"/app/calendar"}>
+      <SidebarButton
+        sidebar={sidebar}
+        name={"Calendar"}
+        active={pathname === "/app/calendar"}
+        icon={CalendarBlank}
+        mirrored
+      />
+    </Link>
   </Flex>
 );

src/components/Sidebar/SidebarButton.tsx

@@ -38,7 +38,7 @@ export default ({
       <MotionFlex
         justify={"center"}
         bg={active ? secondary + "40" : undefined}
-        animate={{ width: active ? (sidebar ? "56px" : "64px") : "0px" }}
+        animate={{ width: active ? (sidebar ? "48px" : "56px") : "0px" }}
         align={"center"}
         borderRadius={"16px"}
         h={"32px"}
@@ -51,7 +51,7 @@ export default ({
           />
         </Box>
       </MotionFlex>
-      <Text as={active ? "b" : "label"} fontSize={"sm"} mt="4px">
+      <Text as={active ? "b" : "label"} fontSize={"xs"} mt="4px">
         {name}
       </Text>
     </Flex>

src/routes/Main/Calendar/Calendar.tsx

@@ -0,0 +1,40 @@
+import {
+  Card,
+  CardHeader,
+  Heading,
+  useToken,
+  Badge,
+  CardBody,
+  Icon,
+  Flex,
+} from "@chakra-ui/react";
+
+import { Calendar as CalendarIcon } from "phosphor-react";
+
+export const Calendar = () => {
+  console.log("calendar");
+  return (
+    <Flex w={"full"} h="full" direction={"column"} align="center">
+      <Card bg="transparent" shadow="xl">
+        <CardHeader>
+          <Heading size="md" display={"flex"} alignItems="center" gap={2}>
+            <Icon
+              rounded="full"
+              as={CalendarIcon}
+              bg={useToken("colors", "primary.400") + "22"}
+              boxSize={10}
+              p={2}
+              color="primary.400"
+            />
+            Calendar<Badge>Coming soon</Badge>
+          </Heading>
+        </CardHeader>
+        <CardBody>
+          Get a bird&apos;s eye view of your timetable, and see what&apos;s
+          coming. View your sport from Clipboard, see when you assignments are
+          due from Canvas and more.
+        </CardBody>
+      </Card>
+    </Flex>
+  );
+};

src/routes/Main/Calendar/index.ts

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar";