add web demo

apps/web/app/providers.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Dispatch, ReactNode, SetStateAction, createContext } from "react";
+import { ThemeProvider, useTheme } from "next-themes";
+import { Toaster } from "sonner";
+import { Analytics } from "@vercel/analytics/react";
+import useLocalStorage from "@/lib/hooks/use-local-storage";
+
+export const AppContext = createContext<{
+  font: string;
+  setFont: Dispatch<SetStateAction<string>>;
+}>({
+  font: "Default",
+  setFont: () => {},
+});
+
+const ToasterProvider = () => {
+  const { theme } = useTheme() as {
+    theme: "light" | "dark" | "system";
+  };
+  return <Toaster theme={theme} />;
+};
+
+export default function Providers({ children }: { children: ReactNode }) {
+  const [font, setFont] = useLocalStorage<string>("novel__font", "Default");
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      value={{
+        light: "light-theme",
+        dark: "dark-theme",
+      }}
+    >
+      <AppContext.Provider
+        value={{
+          font,
+          setFont,
+        }}
+      >
+        <ToasterProvider />
+        {children}
+        <Analytics />
+      </AppContext.Provider>
+    </ThemeProvider>
+  );
+}