rolling-scopes · YuliaDemir · Apr 5, 2025 · Apr 5, 2025 · Apr 5, 2025 · Apr 7, 2025
diff --git a/dev-data/course-titles.data.ts b/dev-data/course-titles.data.ts
@@ -13,15 +13,12 @@ export const COURSE_TITLES = {
   AWS_AI: 'AWS AI',
 } as const;
 
-export const AWS_FUNDAMENTALS_BADGE = `${COURSE_TITLES.AWS_FUNDAMENTALS} badge` as const;
-export type AwsFundamentalsBadge = typeof AWS_FUNDAMENTALS_BADGE;
 export type CourseNames = typeof COURSE_TITLES;
 export type CourseNamesKeys = CourseNames[keyof CourseNames];
 export type CoursesWithRequirementsNames = Exclude<CourseNamesKeys, CourseNames['REACT']>;
 export type CourseMap = {
   [courseName in CoursesWithRequirementsNames]: Course;
 };
-export type TrainingProgramType = CourseNamesKeys | AwsFundamentalsBadge;
 
 export const DISCORD_LINKS = {
   [COURSE_TITLES.JS_PRESCHOOL_RU]: 'https://discord.com/invite/gFnRh8Sudg',

diff --git a/dev-data/index.ts b/dev-data/index.ts
@@ -9,6 +9,7 @@ export type {
   MentorshipDetailsType,
   MentorshipRoute,
 } from './mentorship-data.types';
+
 export type { MentorshipCourseTitles, MentorshipLinks } from './mentorship-data.types';
 
 export type { StageCardProps, StudyPathPage, StudyPathProps } from './study-path-data.types';
@@ -23,16 +24,14 @@ export {
   RS_DOCS_EN_LINK,
   RS_DOCS_TELEGRAM_CHATS_LINK,
 } from './communication.data';
+export { type Benefit } from './benefit-mentorship.data';
-export { type Benefit } from './benefit-mentorship.data';
+export type { Benefit } from './benefit-mentorship.data';
-export { type Benefit } from './benefit-mentorship.data';
+export type { Benefit } from './benefit-mentorship.data';
 export {
-  AWS_FUNDAMENTALS_BADGE,
   COURSE_TITLES,
   type CourseNames,
   type CourseNamesKeys,
   type CoursesWithRequirementsNames,
   DISCORD_LINKS,
-  type TrainingProgramType,
 } from './course-titles.data';
-export { type Benefit } from './benefit-mentorship.data';
 export { aboutMentorsData } from './about-mentors.data';
 export { benefitMentorshipHome, benefitMentorshipMentors } from './benefit-mentorship.data';
 export { communicationText } from './widget-communication.data';

diff --git a/dev-data/training-program.data.tsx b/dev-data/training-program.data.tsx
@@ -2,13 +2,7 @@
 import { JSX } from 'react';
 import { StaticImageData } from 'next/image';
 
-import {
-  AWS_FUNDAMENTALS_BADGE,
-  AwsFundamentalsBadge,
-  COURSE_TITLES,
-  CourseNamesKeys,
-} from './course-titles.data';
-import awsPractitionerBadge from '@/shared/assets/aws-cloud-pract-badge.webp';
+import { COURSE_TITLES, CourseNamesKeys } from './course-titles.data';
 import angularImg from '@/shared/assets/rs-slope-angular.webp';
 import awsDevImg from '@/shared/assets/rs-slope-aws-dev.webp';
 import awsFundamentalsImg from '@/shared/assets/rs-slope-aws-fundamentals.webp';
@@ -28,7 +22,7 @@ interface CourseInfo {
 }
 
 type ContentMap = {
-  [key in CourseNamesKeys | AwsFundamentalsBadge]: CourseInfo;
+  [key in CourseNamesKeys]: CourseInfo;
 
 export const contentMap: ContentMap = {
@@ -246,19 +240,6 @@ export const contentMap: ContentMap = {
     ],
     image: reactEnImg,
   },
-  [AWS_FUNDAMENTALS_BADGE]: {
-    title: 'AWS DIGITAL BADGE',
-    content: [
-      <Paragraph key="aws fundamentals badge 01">
-        Upon completing the course and passing the AWS Cloud Quest: Cloud Practitioner, you will
-        obtain an AWS digital badge. This badge will recognize your achievement and demonstrate your
-        knowledge of AWS fundamentals to potential employers or clients. By the end of the course,
-        you will have gained a solid foundation in AWS fundamentals and be prepared to pass the AWS
-        Cloud Practitioner certification.
-      </Paragraph>,
-    ],
-    image: awsPractitionerBadge,
-  },
   [COURSE_TITLES.AWS_DEVOPS]: {
     title: 'Details',
     content: [

@@ -0,0 +1,34 @@
+.badge {
+  gap: 176px;
+
+  .badge-info {
+    min-width: 640px;
+
+    @include media-laptop {
+      gap: 20px;
+      min-width: 400px;
+    }
+
+    @include media-tablet {
+      min-width: auto;
+    }
+  }
+
+  .badge-img {
+    width: 370px;
+    height: 340px;
+
+    @include media-tablet {
+      width: 296px;
+      height: 272px;
+    }
+  }
+
+  @include media-laptop {
+    gap: 50px;
+  }
+
+  @include media-tablet-large {
+    gap: 32px;
+  }
+}
@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { Badge } from './badge';
+import type { StaticImageData } from 'next/image';
+
+const mockImage: StaticImageData = {
+  src: '/test-img.jpg',
+  height: 100,
+  width: 100,
+};
+
+describe('Badge component', () => {
+  const mockProps = {
+    title: 'Badge Title',
+    paragraphs: [
+      'Paragraph one',
+      'Paragraph two',
+    ],
+    image: mockImage,
+    alt: 'Some description',
+  };
+
+  beforeEach(() => {
+    render(<Badge {...mockProps} />);
+  });
+
+  it('renders the badge container', () => {
+    const badge = screen.getByTestId('badge');
+
+    expect(badge).toBeVisible();
+  });
+
+  it('renders a title element', () => {
+    const title = screen.getByText(mockProps.title);
+
+    expect(title).toBeInTheDocument();
+  });
+
+  it('renders all paragraph elements', () => {
+    mockProps.paragraphs.forEach((text) => {
+      const p = screen.getByText(text);
+
+      expect(p).toBeInTheDocument();
+    });
+  });
+
+  it('renders an image with correct alt and src attributes', () => {
+    const image = screen.getByTestId('badge-img');
+
+    expect(image).toBeVisible();
+    expect(image).toHaveAttribute('alt', mockProps.alt);
+    expect(image).toHaveAttribute('src', expect.stringContaining(mockImage.src));
+  });
+});
@@ -0,0 +1,43 @@
+import classNames from 'classnames/bind';
+import Image, { StaticImageData } from 'next/image';
+
+import { Paragraph } from '@/shared/ui/paragraph';
+import { WidgetTitle } from '@/shared/ui/widget-title';
+
+import styles from './badge.module.scss';
+
+type BadgeProps = {
+  title: string;
+  paragraphs: string[];
+  image: StaticImageData;
+  alt: string;
+};
+
+const cx = classNames.bind(styles);
+
+export const Badge = (data: BadgeProps) => {
+  return (
+    <section
+      className={cx('container')}
+      data-testid="badge"
+    >
+      <div className={cx('content', 'column-2')}>
+        <article className={cx('badge-info')}>
+          <WidgetTitle mods="asterisk">{data.title}</WidgetTitle>
+          {data.paragraphs.map((paragraph, index) => (
+            <Paragraph key={index}>
+              {paragraph}
+            </Paragraph>
+          ),
+          )}
+        </article>
+        <Image
+          className={cx('badge-img')}
+          src={data.image}
+          alt={data.alt}
+          data-testid="badge-img"
+        />
+      </div>
+    </section>
+  );
+};
@@ -0,0 +1 @@
+export { Badge } from './badge';
@@ -1,5 +1,6 @@
 import { trainerStore } from '@/entities/trainer';
 import { AboutCourse } from '@/widgets/about-course';
+import { AwsBadge } from '@/widgets/aws-badge';
 import { Breadcrumbs } from '@/widgets/breadcrumbs';
 import { Certification } from '@/widgets/certification';
 import { Communication } from '@/widgets/communication';
@@ -24,7 +25,7 @@ export const AwsFundamentals = async ({ courseName }: AwsFundamentalsProps) => {
       <Certification courseName={courseName} />
       <Communication courseName={courseName} />
       <Required courseName={courseName} />
-      <TrainingProgram courseName={courseName} specify="badge" />
+      <AwsBadge />
       {trainers && <Trainers trainers={trainers} courseName={courseName} />}
     </>
   );

@@ -0,0 +1 @@
+export { AwsBadge } from './ui/aws-badge';
@@ -0,0 +1,19 @@
+import imageAws from '@/shared/assets/aws-cloud-pract-badge.webp';
+import { Badge } from '@/shared/ui/badge';
+
+export const AwsBadge = () => {
+  return (
+    <Badge
+      title="AWS DIGITAL BADGE"
+      paragraphs={[
+        `Upon completing the course and passing the AWS Cloud Quest: Cloud Practitioner, you will
+        obtain an AWS digital badge. This badge will recognize your achievement and demonstrate your
+        knowledge of AWS fundamentals to potential employers or clients. By the end of the course,
+        you will have gained a solid foundation in AWS fundamentals and be prepared to pass the AWS
+        Cloud Practitioner certification.`,
+      ]}
+      image={imageAws}
+      alt="AWS Digital Badge"
+    />
+  );
+};
@@ -2,7 +2,6 @@ import { cloneElement } from 'react';
 import classNames from 'classnames/bind';
 import Image from 'next/image';
 
-import { isTrainingProgramType } from '@/shared/helpers/is-training-program';
 import { selectCourse } from '@/shared/hooks/use-course-by-title/utils/select-course';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { WidgetTitle } from '@/shared/ui/widget-title';
@@ -14,17 +13,13 @@ const cx = classNames.bind(styles);
 
 type TrainingProgramProps = {
   courseName: CourseNamesKeys;
-  specify?: string;
 };
 
-export const TrainingProgram = async ({ courseName, specify = '' }: TrainingProgramProps) => {
+export const TrainingProgram = async ({ courseName }: TrainingProgramProps) => {
   const course = await selectCourse(courseName);
   const { language } = course;
-  const programName = specify ? `${courseName} ${specify}` : courseName;
-  const contentName = isTrainingProgramType(programName) ? programName : courseName;
-  const isCourseWithBadge = courseName.includes('badge');
 
-  const { title, content, image } = contentMap[contentName];
+  const { title, content, image } = contentMap[courseName];
   const registrationLinkText = course.enroll
     ? trainingProgramLink[language].linkLabel
     : trainingProgramLink[language].noLinkLabel;
@@ -49,7 +44,7 @@ export const TrainingProgram = async ({ courseName, specify = '' }: TrainingProg
           data-testid="image"
           src={image}
           alt={course?.title}
-          className={cx('image', { badge: isCourseWithBadge })}
+          className={cx('image')}
         />
       </div>
     </section>