feat: create Layout component and transfer necessary code

meta: issue-6_layout-component

Author: ChernoSlava

public/logo.png

@@ -1,22 +1,20 @@
 import React from 'react';
-import { ApolloProvider } from '@apollo/client';
+import { Route, Routes } from 'react-router-dom';
 import client from './client';
+import { ApolloProvider } from '@apollo/client';
+
 import { ArticleListContainer, ArticlePageContainer } from './containers';
-import {  Route, Routes, Link } from 'react-router-dom';
-import { AppStyled, MainLogoStyled } from './styled';
+import { AppLayout } from './components';
 
 function App() {
   return (
     <ApolloProvider client={client}>
-      <AppStyled>
-        <Link to="/">
-          <MainLogoStyled src='https://point.md/static/svg/new-point-logo.svg' alt='Point logo' />
-        </Link>
+      <AppLayout>
         <Routes>
             <Route path="/" element={<ArticleListContainer />} /> 
             <Route  path="/article/:slag" element={<ArticlePageContainer />} />
         </Routes>
-      </AppStyled>
+      </AppLayout>
     </ApolloProvider>
   );
 }

public/logo192.png

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Outlet, Link } from 'react-router-dom';
+
+import { AppStyled, MainLogoStyled } from './styled';
+
+
+export const AppLayout: React.FC<{
+  children: React.ReactElement | null;
+}> = ({ children }): JSX.Element => {
+  return (
+    <>
+      <AppStyled>
+        <Link to="/">
+          <MainLogoStyled src='https://point.md/static/svg/new-point-logo.svg' alt='Point logo' />
+        </Link>
+        <Outlet />
+        {children}
+      </AppStyled>
+    </>
+  );
+};

public/logo512.png

@@ -0,0 +1 @@
+export { AppLayout } from './AppLayout';

src/App.tsx

@@ -10,6 +10,7 @@ export const AppStyled = styled.div`
   padding: 20px;
   margin: 0 auto;
   background: #F5F5F5;
+  background-color: rgb(255, 255, 255);
 `;
 
 export const MainLogoStyled = styled.img`

src/components/AppLayout/AppLayout.tsx

@@ -12,6 +12,7 @@ const ArticleItemStyled = styled.li`
 
 const ArticleImgBoxStyled = styled.div`
     width: 240px;
+    min-width: 240px
 `;
 
 const ArticleImgStyled = styled.img`

src/components/AppLayout/index.ts

@@ -5,6 +5,8 @@ const ArticlePageStyled = styled.div`
     max-width: 984px;
     padding: 24px;
     border-radius: 8px;
+    display: flex;
+    flex-direction: column;
 `;
 
 const ArticleTitleStyled = styled.h2`

src/styled.tsx src/components/AppLayout/styled.tsx

@@ -1 +1,2 @@
 export { ArticleList } from './ArticleList';
+export { AppLayout } from './AppLayout';