From 9a3ad8ac953cff87b2ab6fb39ddc2119b14c55e0 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 1 Jan 2022 19:51:17 -0600
Subject: [PATCH] Basic modal for add sticker component.

---
 components/calender/index.tsx             |  2 +
 components/calender/modals/AddSticker.tsx | 45 +++++++++++++++++++++++
 pages/_document.tsx                       |  2 +-
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 components/calender/modals/AddSticker.tsx

diff --git a/components/calender/index.tsx b/components/calender/index.tsx
index 3ce2184..7a5d54f 100644
--- a/components/calender/index.tsx
+++ b/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>
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
new file mode 100644
index 0000000..cbe85c2
--- /dev/null
+++ b/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;
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 9254eaa..be25952 100644
--- a/pages/_document.tsx
+++ b/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 {