Merge pull request hexlet-rus#707 from Lika1998Lika/component-home-page

hexlet-rus#686 update homepage

Author: arthur810629

frontend/src/components/Footer/index.tsx

@@ -24,7 +24,7 @@ function Footer() {
   ));
 
   return (
-    <Flex justify="space-between" wrap="wrap" mx="auto" style={{maxWidth: 1440}} px="md" py="xl">
+    <Flex direction="row" justify="space-between" wrap="wrap" py="xl">
         <Text size="sm" c="dimmed">© {currentYear} RunIT</Text>
         <Group >{items}</Group>
     </Flex>

frontend/src/components/HomePage/index.tsx

@@ -1,25 +1,30 @@
-import { AppShell } from "@mantine/core";
+import { AppShell, Flex, useMantineTheme } from "@mantine/core";
 import Footer from "../Footer";
+import TechnologiesSection, { mocData } from "../TechnologiesSection /TechnologiesSection";
+import { SectionContainer } from "./layout";
+
 
-const mockdata = [
-  { link: '#', label: 'Contact' },
-  { link: '#', label: 'Privacy' },
-  { link: '#', label: 'Blog' },
-  { link: '#', label: 'Careers' },
-]
 function HomePage() {
-  
+  const theme = useMantineTheme();
   return (
-    <AppShell header={{ height: 'auto' }} footer={{ height: 'auto' }} padding="md">
+    <AppShell header={{ height: 60 }}>
 
-      <AppShell.Header pos="sticky">
-          <AppShell.Section mx="auto" px="md" py="md" style={{maxWidth: 1440}}>Header</AppShell.Section>
+      <AppShell.Header>
+        <SectionContainer>
+            Header
+        </SectionContainer>
       </AppShell.Header>
 
-      <AppShell.Main mx="auto" px="md" py={0} style={{maxWidth: 1440}}>Main</AppShell.Main>
+      <AppShell.Main >
+        <SectionContainer>
+          <TechnologiesSection technologies={mocData}/>
+        </SectionContainer>
+      </AppShell.Main>
 
-      <AppShell.Footer>
-        <Footer/>
+      <AppShell.Footer pos="relative">
+        <SectionContainer>
+          <Footer/>
+        </SectionContainer>
       </AppShell.Footer>
 
     </AppShell>

frontend/src/components/HomePage/layout.tsx

@@ -0,0 +1,14 @@
+import { AppShell } from '@mantine/core';
+
+export function SectionContainer({ children, ...props }) {
+  return (
+    <AppShell.Section
+      mx="auto"
+      px="md"
+      style={{ maxWidth: 1440 }}
+      {...props}
+    >
+      {children}
+    </AppShell.Section>
+  );
+}

frontend/src/components/TechnologiesSection /TechnologiesSection.tsx

@@ -35,7 +35,7 @@ export const mocData: TechnologyCategory[] = [
 
 function TechnologiesSection({ technologies }: { technologies: TechnologyCategory[] }) {
   return (
-    <Box component="section" p="md">
+    <Box component="section">
       <Title order={2} mb="xl">
         Технологии
       </Title>

frontend/src/pages/Layout.tsx

@@ -23,7 +23,7 @@ function PageLayout() {
 function AwaitUserData({ children }) {
   const userSlice = useSelector((state: RootReducerType) => state.user);
 
-  if (userSlice.status === 'fullfilled') {
+  if (userSlice.status === 'fulfilled') {
     return children;
   }
 

frontend/src/slices/userSlice.ts

@@ -35,7 +35,7 @@ const userSlice = createSlice({
       })
       .addCase(fetchUserData.fulfilled, (state, { payload }) => {
         state.userInfo = payload.currentUser;
-        state.status = 'fullfilled';
+        state.status = 'fulfilled';
       });
   },
 });

frontend/src/types/slices.d.ts

@@ -85,7 +85,7 @@ export type ModalStateType = {
   item: Partial<ISnippet> | null;
 };
 
-type Statuses = 'empty' | 'fullfilled' | 'pending' | 'rejected';
+type Statuses = 'empty' | 'fulfilled' | 'pending' | 'rejected';
 
 export interface SnippetOwnerType {
   created_at: string;