feat: initial store for toast positions, variants & theme

pheralb · pheralb · commit 49633c76c6ac · 2024-05-14T22:30:46.000+01:00
diff --git a/website/app/root.tsx b/website/app/root.tsx
@@ -27,6 +27,9 @@ import {
 } from 'remix-themes';
 import { themeSessionResolver } from './sessions.server';
 
+// Store:
+import { useDocsStore } from './store';
+
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesheet },
 ];
@@ -50,6 +53,7 @@ export default function AppWithProviders() {
 function App() {
   const data = useLoaderData<typeof loader>();
   const [theme] = useTheme();
+  const { toastPosition } = useDocsStore();
   return (
     <html lang="en" className={cn(theme)}>
       <head>
@@ -67,11 +71,15 @@ function App() {
         )}
       >
         <Header />
-        <ToastProvider position="bottom-right" theme={theme!}>
-          <div className="container mx-auto max-w-7xl">
+        <ToastProvider
+          position={toastPosition}
+          theme={theme!}
+          toastFont="font-sans"
+        >
+          <div className="container w-full max-w-7xl">
             <SidebarContent />
             <article
-              className={cn('ml-60 w-full max-w-4xl py-8', proseClasses)}
+              className={cn('ml-64 max-w-4xl py-8 duration-100', proseClasses)}
             >
               <Outlet />
             </article>
diff --git a/website/app/store/index.ts b/website/app/store/index.ts
@@ -0,0 +1,20 @@
+import type { Position, Theme, Variant } from '@pheralb/toast';
+import { create } from 'zustand';
+
+interface DocsStore {
+  toastPosition: Position;
+  toastVariant: Variant;
+  toastTheme: Theme;
+  setToastPosition: (position: Position) => void;
+  setToastVariant: (variant: Variant) => void;
+  setToastTheme: (theme: Theme) => void;
+}
+
+export const useDocsStore = create<DocsStore>((set) => ({
+  toastPosition: 'bottom-right',
+  toastVariant: 'success',
+  toastTheme: 'light',
+  setToastPosition: (position) => set({ toastPosition: position }),
+  setToastVariant: (variant) => set({ toastVariant: variant }),
+  setToastTheme: (theme) => set({ toastTheme: theme }),
+}));
