layout

src/App.tsx

@@ -11,16 +11,12 @@ import headerLinks from './assets/header.json';
 function App() {
 
   return (
-    <div style={{
-      position: 'absolute',
-      width: '100%',
-      top: 0
-    }}>
+    <Container fluid p={0} pos={'absolute'} w={'100%'} top={0}>
       <HeaderSimple links={headerLinks.links} />
       <KartaPage></KartaPage>
       <FooterLinks data={footerLinks.data} />
       
-    </div >
+    </Container >
   );
 }
 

src/KartaPage.tsx

@@ -1,4 +1,4 @@
-import { Grid, Skeleton, Flex, ScrollArea, Autocomplete, Container } from '@mantine/core';
+import { Grid, Skeleton, Box, Flex, ScrollArea, Autocomplete, Container } from '@mantine/core';
 import { ArticleCardVertical } from './ArticleCard';
 import articleCard from './assets/card.json';
 import Map from 'react-map-gl/maplibre';
@@ -6,16 +6,58 @@ import mapstyle from './assets/basemap.json'
 
 export function KartaPage() {
   return (
-    <Map
-      initialViewState={{
-        longitude: 55,
-        latitude: 60,
-        zoom: 3
-      }}
-      style={{
-        height: '90vh'
-      }}
-      mapStyle={mapstyle}
-    />
+    <div style={{position: 'relative'}}>
+      <Map
+        initialViewState={{
+          longitude: 55,
+          latitude: 60,
+          zoom: 3
+        }}
+        style={{
+          height: '90vh'
+        }}
+        mapStyle={mapstyle}
+      />
+      <Box style={{
+        position: 'absolute',
+        top: '1rem',
+        right: '1rem',
+        width: '40rem',
+        height: '80vh',
+        backgroundColor: 'white',
+        borderRadius: '5px',
+        opacity: '80%',
+        padding: '1rem 0 1rem 1rem'
+      }}>
+        <ScrollArea h={'80vh'} type="auto">
+          <Flex
+            mih={50}
+            gap="md"
+            justify="flex-start"
+            align="start"
+            direction="column"
+            wrap="wrap"
+            mr={20}
+          >
+            <Autocomplete
+              w={'100%'}
+              placeholder="Поиск"
+              limit={2}
+              data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
+            />
+            <ArticleCardVertical {...articleCard} />
+            <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
+            <ArticleCardVertical {...articleCard} />
+            <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
+            <Skeleton mb={10} animate={false} height={100} />
+          </Flex>
+        </ScrollArea>
+      </Box>
+    </div>
   );
+
+
 }