added settings pages

contexts/SettingsContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, FC, ReactNode, useContext, useState } from "react";
+
+export const colorMap = {
+  pink: "#ea156c",
+  orange: "#e28800",
+  green: "#46a80a",
+  teal: "#05a8b6",
+  purple: "#7305d4",
+};
+
+interface ISettingsContext {
+  calendarColor: string;
+  setCalendarColor: (color: string) => void;
+}
+
+const SettingsContext = createContext<ISettingsContext>(undefined!);
+
+export const SettingsContextProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [calendarColor, setCalendarColor] = useState<string>(colorMap.pink);
+
+  return (
+    <SettingsContext.Provider value={{ calendarColor, setCalendarColor }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export const useSettingsContext = () => useContext(SettingsContext)!;