fix: fixed review issues

src/components/ArticleNavigation/ArticleNavigation.scss

@@ -0,0 +1,60 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}article-navigation';
+
+#{$block} {
+    display: flex;
+    gap: var(--g-spacing-6);
+    @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+        gap: var(--g-spacing-5);
+    }
+    &__content {
+        padding: var(--g-spacing-2) 0;
+        overflow: hidden;
+        width: 100%;
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+            padding: var(--g-spacing-3) 0;
+        }
+        &-title {
+            @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+                display: none;
+            }
+        }
+    }
+    &__button {
+        cursor: pointer;
+        display: flex;
+        gap: var(--g-spacing-3);
+        width: 50%;
+        border-radius: 16px;
+        border: 1px solid var(--g-color-sfx-fade);
+        padding: var(--g-spacing-1);
+        justify-content: space-between;
+        &_reverse {
+            flex-direction: row-reverse;
+        }
+        &_right {
+            margin-left: auto;
+            padding-left: var(--g-spacing-5);
+        }
+        &_left {
+            margin-right: auto;
+            padding-right: var(--g-spacing-5);
+        }
+        &-icon {
+            flex: none;
+            width: 56px;
+            height: 100%;
+            border-radius: 12px;
+            background: var(--g-color-base-generic);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--g-color-text-primary);
+            @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+                width: 40px;
+            }
+        }
+    }
+}

src/components/ArticleNavigation/ArticleNavigation.tsx

@@ -0,0 +1,95 @@
+import {ArrowLeft, ArrowRight} from '@gravity-ui/icons';
+import {Flex, Icon, Link, Text} from '@gravity-ui/uikit';
+import {useCallback} from 'react';
+import {CONTENT_WRAPPER_ID} from 'src/constants';
+import {block} from 'src/utils';
+
+import {SubSection} from '../NavigationLayout/types';
+
+const b = block('article-navigation');
+
+import './ArticleNavigation.scss';
+
+interface ArticleNavigationProps {
+    prevSection: SubSection | null;
+    nextSection: SubSection | null;
+}
+
+export const ArticleNavigation = ({prevSection, nextSection}: ArticleNavigationProps) => {
+    const scrollTop = useCallback(() => {
+        const content = document.getElementById(CONTENT_WRAPPER_ID);
+        if (content) {
+            content.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+            });
+        }
+    }, []);
+
+    const nextHandler = () => {
+        if (!nextSection) {
+            return;
+        }
+        scrollTop();
+    };
+
+    const prevHandler = () => {
+        if (!prevSection) {
+            return;
+        }
+        scrollTop();
+    };
+
+    return (
+        <div className={b()}>
+            {prevSection && (
+                <Link
+                    href={prevSection.url}
+                    onClick={prevHandler}
+                    className={b('button', {left: true})}
+                >
+                    <div className={b('button-icon')}>
+                        <Icon data={ArrowLeft} size={16} />
+                    </div>
+                    <Flex direction="column" gap="1" className={b('content')}>
+                        <Text variant="body-short" color="light-complementary">
+                            Previous
+                        </Text>
+                        <Text
+                            className={b('content-title')}
+                            ellipsis={true}
+                            variant="body-2"
+                            color="primary"
+                        >
+                            {prevSection.title}
+                        </Text>
+                    </Flex>
+                </Link>
+            )}
+            {nextSection && (
+                <Link
+                    href={nextSection.url}
+                    onClick={nextHandler}
+                    className={b('button', {reverse: true, right: true})}
+                >
+                    <div className={b('button-icon')}>
+                        <Icon data={ArrowRight} size={16} />
+                    </div>
+                    <Flex direction="column" gap="1" className={b('content')}>
+                        <Text variant="body-short" color="light-complementary">
+                            Next
+                        </Text>
+                        <Text
+                            className={b('content-title')}
+                            ellipsis={true}
+                            variant="body-2"
+                            color="primary"
+                        >
+                            {nextSection.title}
+                        </Text>
+                    </Flex>
+                </Link>
+            )}
+        </div>
+    );
+};

src/components/ArticleNavigation/index.ts

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