Добавлены стили emotion

src/components/heading/index.style.ts

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import { HeadingVariant } from './types';
+import { css } from '@emotion/react';
+
+export const HeadingStyled = styled.h1<{ variant?: HeadingVariant }>`
+  font-size: 32px;
+  font-weight: bold;
+  color: blue;
+  width: 100%;
+  @media (min-width: 768px) {
+    font-size: 38px;
+    width: 50%;
+  }
+  @media (min-width: 1024px) {
+    width: 100%;
+  }
+
+  ${({ variant }) => {
+    switch (variant) {
+      case HeadingVariant.h2:
+        return css`
+          font-size: 24px;
+        `;
+      case HeadingVariant.h3:
+        return css`
+          font-size: 18px;
+        `;
+      case HeadingVariant.h4:
+        return css`
+          font-size: 14px;
+        `;
+    }
+    return css``;
+  }}
+`;

src/components/heading/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HeadingStyled } from './index.style';
+import { HeadingProps, HeadingVariant } from './types';
+
+const Heading = ({ children, variant = HeadingVariant.h1, className }: HeadingProps) => {
+  return (
+    <HeadingStyled className={className} as={variant} variant={variant}>
+      {children}
+    </HeadingStyled>
+  );
+};
+
+export default Heading;

src/components/heading/types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+export enum HeadingVariant {
+  h1 = 'h1',
+  h2 = 'h2',
+  h3 = 'h3',
+  h4 = 'h4'
+}
+
+export interface HeadingProps {
+  children?: ReactNode;
+  variant?: HeadingVariant;
+  className?: string;
+}

src/container/detail/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import Heading from '../../components/heading';
+import { HeadingVariant } from '../../components/heading/types';
 
 const DetailPage = (): React.ReactElement => {
-  return <h1>Detail Page</h1>;
+  return <Heading variant={HeadingVariant.h2}>Detail Page</Heading>;
 };
 
 export default DetailPage;

src/container/list/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import Heading from '../../components/heading';
 
 const ListPage = (): React.ReactElement => {
-  return <h1>List Page New</h1>;
+  return <Heading>List Page New</Heading>;
 };
 
 export default ListPage;

src/container/main/components/layout/header.tsx

@@ -1,31 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { getNavigationsValue } from '@brojs/cli';
+import { getNavigationValue } from '@brojs/cli';
+import { HeaderContainer, NavContainer, NavItem, NavLink } from './index.style';
 
 const navigations: Array<{ name: string; href: string }> = [
   {
     name: 'Главная',
-    href: getNavigationsValue('kfu-24-teacher.main')
+    href: getNavigationValue('kfu-24-teacher.main')
   },
   {
     name: 'Детальная информация',
-    href: getNavigationsValue('kfu-24-teacher.detail')
+    href: getNavigationValue('kfu-24-teacher.detail')
   }
 ];
 
 const Header = (): React.ReactElement => {
   return (
-    <header>
-      <ul>
+    <HeaderContainer>
+      <NavContainer>
         {navigations.map((item) => {
           return (
-            <li key={item.name}>
-              <Link to={item.href}>{item.name}</Link>
-            </li>
+            <NavItem key={item.name}>
+              <NavLink to={item.href} end>
+                {item.name}
+              </NavLink>
+            </NavItem>
           );
         })}
-      </ul>
-    </header>
+      </NavContainer>
+    </HeaderContainer>
   );
 };
 

src/container/main/components/layout/index.style.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { NavLink as NavLinkBase } from 'react-router-dom';
+
+export const HeaderContainer = styled('header')``;
+
+export const NavContainer = styled.nav`
+  display: flex;
+  gap: 24px;
+  padding: 12px 0;
+`;
+
+export const NavItem = styled.div``;
+
+export const NavLink = styled(NavLinkBase)`
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+
+  &.active {
+    border-bottom: 2px solid black;
+  }
+`;

src/container/main/router.tsx

@@ -2,22 +2,23 @@ import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import ListPage from '../list';
 import DetailPage from '../detail';
-import { getNavigationsValue } from '@brojs/cli';
+import { getNavigationValue } from '@brojs/cli';
 import Layout from './components/layout';
 
 export const router = createBrowserRouter([
   {
-    path: getNavigationsValue('kfu-24-teacher.main'),
+    path: getNavigationValue('kfu-24-teacher.main'),
     element: <Layout />,
     children: [
       {
-        path: getNavigationsValue('kfu-24-teacher.main'),
+        path: getNavigationValue('kfu-24-teacher.main'),
         element: <ListPage />
       },
       {
-        path: getNavigationsValue('kfu-24-teacher.detail'),
+        path: getNavigationValue('kfu-24-teacher.detail'),
         element: <DetailPage />
-      }
+      },
+      { path: '*', element: <h1>404</h1> }
     ]
   }
 ]);