Add validation for uploaded geojson

Author: tnagorra

manager-dashboard/app/components/AlertBanner/index.tsx

@@ -2,25 +2,36 @@ import React from 'react';
 import { IoAlertCircleOutline } from 'react-icons/io5';
 import { _cs } from '@togglecorp/fujs';
 
+import Heading from '#components/Heading';
+
 import styles from './styles.css';
 
 interface Props {
     className?: string;
+    title?: React.ReactNode;
     children: React.ReactNode;
 }
 
 function AlertBanner(props: Props) {
     const {
         className,
         children,
+        title,
     } = props;
 
     return (
         <div className={_cs(styles.banner, className)}>
             <div className={styles.bannerIcon}>
                 <IoAlertCircleOutline />
             </div>
-            {children}
+            <div className={styles.container}>
+                {title && (
+                    <Heading>
+                        {title}
+                    </Heading>
+                )}
+                {children}
+            </div>
         </div>
     );
 }

manager-dashboard/app/components/AlertBanner/styles.css

@@ -8,4 +8,10 @@
     .banner-icon {
         font-size: var(--font-size-super-large);
     }
-}
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+    }
+}

manager-dashboard/app/components/GeoJsonPreview/index.tsx

@@ -89,6 +89,8 @@ function GeoJsonPreview(props: Props) {
                 const layer = new Layer(
                     finalUrl,
                     {
+                        // NOTE: we have a limit of 22
+                        maxZoom: 22,
                         // attribution: '',
                         // subdomains: ['a', 'b', 'c'],
                     },