From 3e2645e3f1d9c5126a1e5d738fe8d479aedac858 Mon Sep 17 00:00:00 2001 From: Wystov Date: Sat, 22 Jun 2024 10:33:43 +0200 Subject: [PATCH 1/3] feat: colorful icons in upcoming courses --- src/widgets/courses-school/ui/CourseCard.tsx | 9 ++++++--- src/widgets/courses-school/ui/courses.scss | 1 + src/widgets/courses-school/ui/courses.tsx | 8 ++------ 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/widgets/courses-school/ui/CourseCard.tsx b/src/widgets/courses-school/ui/CourseCard.tsx index aca550bba..a45eeebf8 100644 --- a/src/widgets/courses-school/ui/CourseCard.tsx +++ b/src/widgets/courses-school/ui/CourseCard.tsx @@ -1,10 +1,11 @@ import { Course } from '@/app/types'; import { ArrowIcon } from '@/shared/icons'; +import Image from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; type addFields = { buttonText: string; - icon: JSX.Element | null; + iconSrc: string; }; type PropsType = Pick & addFields; @@ -15,11 +16,13 @@ export const CourseCard = ({ startDate, detailsUrl, buttonText, - icon, + iconSrc, }: PropsType) => { return (
-
{icon}
+
+ {title} +

{title}

{`${startDate} • ${language[0].toUpperCase()}`}

diff --git a/src/widgets/courses-school/ui/courses.scss b/src/widgets/courses-school/ui/courses.scss index cd754d0e0..1152a8216 100644 --- a/src/widgets/courses-school/ui/courses.scss +++ b/src/widgets/courses-school/ui/courses.scss @@ -58,6 +58,7 @@ img { width: 48px; height: 36px; + object-fit: contain; } } diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx index 2eb9da4f8..3671462aa 100644 --- a/src/widgets/courses-school/ui/courses.tsx +++ b/src/widgets/courses-school/ui/courses.tsx @@ -1,6 +1,4 @@ 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'; @@ -25,16 +23,14 @@ 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 ( From 0c6d8c6e0a3b9f50fb9e23aeb337ace8dee17e38 Mon Sep 17 00:00:00 2001 From: Wystov Date: Mon, 24 Jun 2024 11:06:19 +0200 Subject: [PATCH 2/3] refactor: delete redundant files --- src/widgets/courses-school/lib/getCourseIcon.tsx | 5 ----- src/widgets/courses-school/lib/icons.data.tsx | 15 --------------- 2 files changed, 20 deletions(-) delete mode 100644 src/widgets/courses-school/lib/getCourseIcon.tsx delete mode 100644 src/widgets/courses-school/lib/icons.data.tsx diff --git a/src/widgets/courses-school/lib/getCourseIcon.tsx b/src/widgets/courses-school/lib/getCourseIcon.tsx deleted file mode 100644 index a49ff7001..000000000 --- a/src/widgets/courses-school/lib/getCourseIcon.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { IconsTitle, icons } from './icons.data'; - -export const getCourseIcon = (title: IconsTitle) => { - return icons[title]; -}; diff --git a/src/widgets/courses-school/lib/icons.data.tsx b/src/widgets/courses-school/lib/icons.data.tsx deleted file mode 100644 index 43925b38a..000000000 --- a/src/widgets/courses-school/lib/icons.data.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { COURSE_TITLES } from '@/shared/data/courseTitles.data'; -import { AngularIcon, AwsLogo, HtmlIcon, JavascriptIcon, NodeJsIcon, ReactIcon } from '@/shared/icons'; - -export const icons = { - [COURSE_TITLES.JS_PRESCHOOL_RU]: , - [COURSE_TITLES.JS_EN]: , - [COURSE_TITLES.JS_RU]: , - [COURSE_TITLES.REACT]: , - [COURSE_TITLES.ANGULAR]: , - [COURSE_TITLES.NODE]: , - [COURSE_TITLES.AWS_FUNDAMENTALS]: , - [COURSE_TITLES.AWS_CLOUD_DEVELOPER]: , -}; - -export type IconsTitle = keyof typeof COURSE_TITLES; From 481bd78fa13d011c974ac29ce2b747e6211b3948 Mon Sep 17 00:00:00 2001 From: Wystov Date: Mon, 24 Jun 2024 14:30:41 +0200 Subject: [PATCH 3/3] refactor: styles to module --- src/widgets/courses-school/ui/CourseCard.tsx | 17 ++-- .../courses-school/ui/courses.module.scss | 91 ++++++++++++++++++ src/widgets/courses-school/ui/courses.scss | 95 ------------------- src/widgets/courses-school/ui/courses.tsx | 17 ++-- 4 files changed, 112 insertions(+), 108 deletions(-) create mode 100644 src/widgets/courses-school/ui/courses.module.scss delete mode 100644 src/widgets/courses-school/ui/courses.scss diff --git a/src/widgets/courses-school/ui/CourseCard.tsx b/src/widgets/courses-school/ui/CourseCard.tsx index a45eeebf8..35f9117a5 100644 --- a/src/widgets/courses-school/ui/CourseCard.tsx +++ b/src/widgets/courses-school/ui/CourseCard.tsx @@ -1,8 +1,13 @@ +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; iconSrc: string; @@ -19,15 +24,15 @@ export const CourseCard = ({ iconSrc, }: PropsType) => { return ( -
-
+
+
{title}
-
-

{title}

-

{`${startDate} • ${language[0].toUpperCase()}`}

+
+

{title}

+

{`${startDate} • ${language[0].toUpperCase()}`}

-
+
} diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses.module.scss new file mode 100644 index 000000000..f219bb270 --- /dev/null +++ b/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; + } + } +} diff --git a/src/widgets/courses-school/ui/courses.scss b/src/widgets/courses-school/ui/courses.scss deleted file mode 100644 index 1152a8216..000000000 --- a/src/widgets/courses-school/ui/courses.scss +++ /dev/null @@ -1,95 +0,0 @@ -.courses { - .title { - margin-top: 24px; - margin-bottom: 0; - - font-size: 36px; - font-weight: $font-weight-medium; - line-height: 44px; - letter-spacing: 0; - } - - .content { - .image { - @include media-laptop { - margin-top: 24px; - } - - img { - width: 299px; - height: 193px; - } - } - - .courses { - @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; - } - } - } - } -} diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx index 3671462aa..894ef6b32 100644 --- a/src/widgets/courses-school/ui/courses.tsx +++ b/src/widgets/courses-school/ui/courses.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames/bind'; import { CourseCard } from './CourseCard'; import { selectCourses } from '../lib/selectCourses'; import { ROUTES } from '@/app/const'; @@ -7,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(); @@ -38,17 +41,17 @@ export const Courses = () => { }); return ( -
-
-

Upcoming courses

-
-
+
+
+

Upcoming courses

+
+
{coursesContent} } variant="colored" button> Go to courses
-
+