second commit

src/Karta.tsx

@@ -2,18 +2,33 @@ import { createStyles } from '@mantine/core';
 import Map from 'react-map-gl/maplibre';
 import mapstyle from './assets/basemap.json'
 
+const useStyles = createStyles(() => ({
+    root: {
+        // paddingTop: rem(80),
+        // paddingBottom: rem(120),
+        height: '80vh',
+        position: 'relative',
+    },
+}));
+
 export function Karta() {
+    const { classes } = useStyles();
+
     return (
-        <Map
+        <div className={classes.root}>
-            initialViewState={{
+                <Map
-                longitude: 55,
+                    initialViewState={{
-                latitude: 60,
+                        longitude: 55,
-                zoom: 3
+                        latitude: 60,
-            }}
+                        zoom: 3
-            style={{
+                    }}
-                
+                    style={{
-            }}
+                        position: 'absolute',
-            mapStyle={mapstyle}
+                        top: 0,
-        />
+                        bottom: 0
+                    }}
+                    mapStyle={mapstyle}
+                />
+        </div>
     );
 }

src/KartaPage.tsx

@@ -5,39 +5,38 @@ import articleCard from './assets/card.json';
 
 export function KartaPage() {
   return (
-    <Karta />
+    <Grid >
-    // <Grid >
+      <Grid.Col span={8}>
-    //   <Grid.Col span={8}>
+        <Karta />
-    //     <Karta />
+      </Grid.Col>
-    //   </Grid.Col>
+      <Grid.Col span={4} >
-    //   <Grid.Col span={4} >
+        <ScrollArea h={'80vh'} type="auto">
-    //     <ScrollArea h={'80vh'} type="auto">
+          <Flex
-    //       <Flex
+            mih={50}
-    //         mih={50}
+            gap="md"
-    //         gap="md"
+            justify="flex-start"
-    //         justify="flex-start"
+            align="start"
-    //         align="start"
+            direction="column"
-    //         direction="column"
+            wrap="wrap"
-    //         wrap="wrap"
+            mr={20}
-    //         mr={20}
+          >
-    //       >
+            <Autocomplete
-    //         <Autocomplete
+              w={'100%'}
-    //           w={'100%'}
+              placeholder="Поиск"
-    //           placeholder="Поиск"
+              limit={2}
-    //           limit={2}
+              data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
-    //           data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
+            />
-    //         />
+            <ArticleCardVertical {...articleCard} />
-    //         <ArticleCardVertical {...articleCard} />
+            <Skeleton mb={10} animate={false} height={100} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+            <ArticleCardVertical {...articleCard} />
-    //         <ArticleCardVertical {...articleCard} />
+            <Skeleton mb={10} animate={false} height={100} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+          </Flex>
-    //       </Flex>
+        </ScrollArea>
-    //     </ScrollArea>
+      </Grid.Col>
-    //   </Grid.Col>
+    </Grid>
-    // </Grid>
   );
 }