Basic modal for add sticker component.

components/calender/index.tsx

@@ -4,6 +4,7 @@ import CalenderNav from "./CalenderNav";
 import { CalenderContext } from "../../contexts/CalenderContext";
 import { getDate, sub, add, getYear, getMonth } from "date-fns";
 import { useRouter } from "next/router";
+import AddSticker from "./modals/AddSticker";
 // TODO: import types
 
 interface UpdateCalendarProps {
@@ -119,6 +120,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                 })}
               >
                 <Text w="100%" h="100%">
+                  {!isOverflow && <AddSticker />}
                   {`Day ${getDate(date)}`}
                 </Text>
               </Box>

components/calender/modals/AddSticker.tsx

@@ -0,0 +1,45 @@
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  // Lorem
+} from "@chakra-ui/react";
+import React, { Fragment, useState } from "react";
+
+const AddSticker = (): JSX.Element => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <Fragment>
+      <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modal Title</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              colorScheme="blue"
+              mr={3}
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              Close
+            </Button>
+            <Button variant="ghost">Secondary Action</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Fragment>
+  );
+};
+
+export default AddSticker;

pages/_document.tsx

@@ -7,7 +7,7 @@ const description =
   // "Behavior and progress tracker for ABDLs and babyfurs alike. Track multiple littles and create any trackers you would like.";
   "Pre-alpha preview of the behavior and progress tracker for ABDLs and babyfurs.";
 
-const logo = "images/logo.svg"
+const logo = "images/logo.svg";
 const logoOG = "/images/logo.png";
 
 class Document extends NextDocument {