Added files and folders into /src directory.

src/components/calender/modals/StickerSelector.tsx

@@ -0,0 +1,73 @@
+import { HStack, Button } from "@chakra-ui/react";
+import React from "react";
+import DemoStickers from "../stickers/DemoStickers";
+
+interface StickerSelectorProps {
+  stickerSet: "Demo";
+  currSticker: StickerVal;
+  selectedSticker: StickerVal;
+  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  initialSticker: React.MutableRefObject<undefined>;
+}
+
+/**
+ * Handles displaying a list of dynamic stickers to be selected.
+ * @param {string} stickerSet The name of the stickers that should be displayed.
+ * @param {StickerVal} currSticker The current sticker for the date.
+ * @param {StickerVal} selectedSticker The selected sticker for the current. date
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
+ */
+
+const StickerSelector = ({
+  stickerSet,
+  currSticker,
+  selectedSticker,
+  updateSelectedSticker,
+  initialSticker
+}: StickerSelectorProps): JSX.Element => {
+  const stickers = {
+    Demo: (
+      <HStack
+        w="100%"
+        h="auto"
+        justifyContent="center"
+        alignContent="center"
+        spacing={14}
+      >
+        <Button
+          isDisabled={currSticker >= 1}
+          ref={currSticker <= 1 ? initialSticker : null}
+          border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === 1 && "gray.800"}
+          onClick={() => updateSelectedSticker(1)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={1} />
+        </Button>
+        <Button
+          isDisabled={currSticker === 0}
+          ref={currSticker >= 1 ? initialSticker : null}
+          border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === 0 && "gray.800"}
+          onClick={() => updateSelectedSticker(0)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={0} />
+        </Button>
+        <Button
+          isDisabled={currSticker <= -1}
+          border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === -1 && "gray.800"}
+          onClick={() => updateSelectedSticker(-1)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={-1} />
+        </Button>
+      </HStack>
+    )
+  };
+
+  return stickers[stickerSet];
+};
+
+export default StickerSelector;