Merge pull request #331 from Wystov/feat/262-upcoming-courses-color-i…

…cons

262-feat: colorful icons in upcoming courses

src/widgets/courses-school/ui/CourseCard.tsx

@@ -1,10 +1,16 @@
+import classNames from 'classnames/bind';
 import { Course } from '@/app/types';
 import { ArrowIcon } from '@/shared/icons';
+import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 
+import styles from './courses.module.scss';
+
+const cx = classNames.bind(styles);
+
 type addFields = {
   buttonText: string;
-  icon: JSX.Element | null;
+  iconSrc: string;
 };
 
 type PropsType = Pick<Course, 'title' | 'language' | 'startDate' | 'detailsUrl'> & addFields;
@@ -15,16 +21,18 @@ export const CourseCard = ({
   startDate,
   detailsUrl,
   buttonText,
-  icon,
+  iconSrc,
 }: PropsType) => {
   return (
-    <section className="course-card">
-      <figure className="icon-container">{icon}</figure>
-      <div className="course-info">
-        <p className="name">{title}</p>
-        <p className="date">{`${startDate} • ${language[0].toUpperCase()}`}</p>
+    <section className={cx('course-card')}>
+      <figure className={cx('icon-container')}>
+        <Image src={iconSrc} alt={title} />
+      </figure>
+      <div className={cx('course-info')}>
+        <p className={cx('name')}>{title}</p>
+        <p className={cx('date')}>{`${startDate} • ${language[0].toUpperCase()}`}</p>
       </div>
-      <div className="details-container">
+      <div className={cx('details-container')}>
         <LinkCustom
           href={detailsUrl}
           icon={<ArrowIcon size="16px" />}

src/widgets/courses-school/ui/courses.module.scss

@@ -0,0 +1,91 @@
+.course-title {
+  margin-top: 24px;
+  margin-bottom: 0;
+
+  font-size: 36px;
+  font-weight: $font-weight-medium;
+  line-height: 44px;
+  letter-spacing: 0;
+}
+
+.image {
+  @include media-laptop {
+    margin-top: 24px;
+  }
+
+  img {
+    width: 299px;
+    height: 193px;
+  }
+}
+
+.course-list {
+  @include media-laptop {
+    width: 100%;
+  }
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  width: 800px;
+
+  .course-card {
+    @extend %transition-all;
+
+    @include media-hover {
+      &:hover {
+        box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
+      }
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    margin-top: 24px;
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+
+      img {
+        width: 48px;
+        height: 36px;
+        object-fit: contain;
+      }
+    }
+
+    .course-info {
+      width: 100%;
+      text-align: left;
+
+      .name {
+        margin-top: 0;
+        margin-bottom: 0;
+
+        font-size: 18px;
+        font-weight: $font-weight-medium;
+        line-height: 24px;
+        color: $color-black;
+      }
+
+      .date {
+        margin-top: 8px;
+        margin-bottom: 0;
+
+        font-size: 14px;
+        line-height: 20px;
+        color: $color-gray-600;
+      }
+    }
+
+    .details-container {
+      padding: 16px;
+    }
+  }
+}

src/widgets/courses-school/ui/courses.tsx

@@ -1,6 +1,5 @@
+import classNames from 'classnames/bind';
 import { CourseCard } from './CourseCard';
-import { getCourseIcon } from '../lib/getCourseIcon';
-import { IconsTitle } from '../lib/icons.data';
 import { selectCourses } from '../lib/selectCourses';
 import { ROUTES } from '@/app/const';
 
@@ -9,7 +8,9 @@ import { useWindowSize } from '@/shared/hooks/use-window-size';
 import { ArrowIcon, RsBanner } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
 
-import './courses.scss';
+import styles from './courses.module.scss';
+
+const cx = classNames.bind(styles);
 
 export const Courses = () => {
   const size = useWindowSize();
@@ -25,34 +26,32 @@ export const Courses = () => {
     linkLabel = 'More';
   }
 
-  const coursesContent = coursesData?.map(({ title, language, startDate, detailsUrl }) => {
-    const courseIcon = getCourseIcon(title as IconsTitle);
-
+  const coursesContent = coursesData?.map(({ title, language, startDate, detailsUrl, iconSrc }) => {
     return (
       <CourseCard
         title={title}
         language={language}
         startDate={startDate}
         detailsUrl={detailsUrl}
-        icon={courseIcon}
+        iconSrc={iconSrc}
         buttonText={linkLabel}
         key={title}
       />
     );
   });
 
   return (
-    <article id="upcoming-courses" className="courses container">
-      <section className="courses content">
-        <h4 className="title">Upcoming courses</h4>
-        <div className="column-2">
-          <div className="courses" data-testid="courses-list">
+    <article id="upcoming-courses" className={cx('container')}>
+      <section className={cx('content')}>
+        <h4 className={cx('course-title')}>Upcoming courses</h4>
+        <div className={cx('column-2')}>
+          <div className={cx('course-list')} data-testid="courses-list">
             {coursesContent}
             <LinkCustom href={ROUTES.COURSES} icon={<ArrowIcon />} variant="colored" button>
               Go to courses
             </LinkCustom>
           </div>
-          <figure className="image">
+          <figure className={cx('image')}>
             <RsBanner />
           </figure>
         </div>