694-refactor: Widget general

dev-data/general.data.ts

@@ -0,0 +1,14 @@
+import { RS_DOCS_EN_LINK } from './communication.data';
+
+export const generalMaterials = [
+  [
+    {
+      id: 0,
+      text: '',
+      title: 'School documentation',
+      link: RS_DOCS_EN_LINK,
+    },
+  ],
+  'All materials are publicly available on YouTube and GitHub',
+  'We also suggest that you familiarize yourself with the summary of the first stage of training.',
+];

dev-data/index.ts

@@ -43,6 +43,7 @@ export { courses } from './courses.data';
 export { coursesPath } from './courses-path.data';
 export { events } from './events.data';
 export { faqData } from './faq.data';
+export { generalMaterials } from './general.data';
 export { heroPageData } from './hero-page.data';
 export { javaScriptEn } from './javascript-en.data';
 export { javaScriptRu } from './javascript-ru.data';

src/widgets/general/index.ts

@@ -1 +1 @@
-export { General } from './general';
+export { General } from './ui/general';

src/widgets/general/ui/general.module.scss

@@ -0,0 +1,29 @@
+.general {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, max-content);
+  column-gap: 24px;
+
+  .title {
+    grid-column: 1 / -1;
+  }
+
+  .info-block {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    max-width: 380px;
+
+    color: $color-gray-600;
+  }
+
+  @include media-tablet {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+
+    .info-block {
+      margin-top: 24px;
+    }
+  }
+}

src/widgets/general/general.test.tsx → src/widgets/general/ui/general.test.tsx

@@ -2,19 +2,23 @@ import { screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { General } from './general';
 import { renderWithRouter } from '@/shared/__tests__/utils';
+import { RS_DOCS_EN_LINK } from 'data';
 
 describe('General', () => {
   beforeEach(() => {
     renderWithRouter(<General />);
   });
 
   it('displays the General title', () => {
-    expect(screen.getByText('General')).toBeVisible();
+    expect(screen.getByTestId('widget-title')).toBeVisible();
   });
 
   it('displays the Materials section', () => {
+    const documentationLink = screen.getByText('School documentation');
+
     expect(screen.getByText('Materials')).toBeVisible();
-    expect(screen.getByText('School documentation')).toBeVisible();
+    expect(documentationLink).toBeVisible();
+    expect(documentationLink).toHaveAttribute('href', RS_DOCS_EN_LINK);
   });
 
   it('displays the Certificate section', () => {

src/widgets/general/ui/general.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames/bind';
+import { List } from '@/shared/ui/list';
+import { Paragraph } from '@/shared/ui/paragraph';
+import { Subtitle } from '@/shared/ui/subtitle';
+import { WidgetTitle } from '@/shared/ui/widget-title';
+import { generalMaterials } from 'data';
+
+import styles from './general.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const General = () => {
+  return (
+    <section className={cx('container')}>
+      <div className={cx('general', 'content')}>
+        <WidgetTitle className={cx('title')} size="small">
+          General
+        </WidgetTitle>
+        <article className={cx('info-block')}>
+          <Subtitle>Materials</Subtitle>
+          <List data={generalMaterials} />
+        </article>
+        <article className={cx('info-block')}>
+          <Subtitle>Certificate</Subtitle>
+          <Paragraph>
+            A certificate of successful completion of the course is issued to all who have passed
+            the two stages of training.
+          </Paragraph>
+        </article>
+        <article className={cx('info-block')}>
+          <Subtitle>Chat</Subtitle>
+          <Paragraph>
+            Open chat for applicants and students on Discord, Telegram and more.
+          </Paragraph>
+        </article>
+      </div>
+    </section>
+  );
+};