feat(events): add event creation form components

src/components/ui/sonner.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+import React from 'react';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  const [shouldExpand, setShouldExpand] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 600px)');
+
+    const handleScreenSizeChange = () => {
+      setShouldExpand(mediaQuery.matches);
+    };
+
+    handleScreenSizeChange(); // set initial value
+    mediaQuery.addEventListener('change', handleScreenSizeChange);
+
+    return () =>
+      mediaQuery.removeEventListener('change', handleScreenSizeChange);
+  }, []);
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      richColors={true}
+      className='toaster group'
+      toastOptions={{
+        style: {
+          backgroundColor: 'var(--color-neutral-150)',
+          color: 'var(--color-text-alt)',
+          borderRadius: 'var(--radius)',
+        },
+        cancelButtonStyle: {
+          backgroundColor: 'var(--color-secondary)',
+          color: 'var(--color-text-alt)',
+        },
+        actionButtonStyle: {
+          backgroundColor: 'var(--color-secondary)',
+          color: 'var(--color-text-alt)',
+        },
+      }}
+      swipeDirections={['left', 'right']}
+      closeButton={true}
+      expand={shouldExpand}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };