diff --git a/src-ts/tools/learn/welcome/WelcomePage.tsx b/src-ts/tools/learn/welcome/WelcomePage.tsx index f495640f0..1bb0f8125 100644 --- a/src-ts/tools/learn/welcome/WelcomePage.tsx +++ b/src-ts/tools/learn/welcome/WelcomePage.tsx @@ -29,7 +29,6 @@ import '../../../lib/styles/index.scss' import { AvailableCoursesList } from './available-courses-list' import { WhatTCACanDo } from './what-tca-cando' import { TCCertifications } from './tc-certifications' -import { FilterBar } from './filter-bar' import styles from './WelcomePage.module.scss' const PRIORITY_CATEGORIES: ReadonlyArray = [ @@ -68,20 +67,6 @@ const WelcomePage: FC = () => { groupBy(orderBy(allCertsData.certifications, 'title', 'asc'), 'certificationCategory.category') ), [allCertsData.certifications]) - // compute all the available category dropdown options - const certsCategoriesOptions: Array<{ - label: string, - value: string, - }> = useMemo(() => [ - { label: 'All Categories', orderIndex: -1, value: '' }, - ...Object.keys(certsByCategory) - .sort() - .map(c => ({ - label: c, - value: c, - })), - ], [certsByCategory]) - // create and sort the certificates groups const certificationsGroups: Array = useMemo(() => orderBy( Object.keys(certsByCategory), @@ -124,14 +109,6 @@ const WelcomePage: FC = () => { - - - - { certificationsGroups={certificationsGroups} selectedCategory={selectedCategory} certificationsProgresses={userCertsData.progresses} + onSelectCategory={onSelectCategory} /> )} diff --git a/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.module.scss b/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.module.scss index 2c898c803..26bdecd35 100644 --- a/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.module.scss +++ b/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.module.scss @@ -45,7 +45,7 @@ @include ltemd { flex-direction: column; align-items: flex-start; - padding-bottom: 0; + padding-bottom: $space-xxl; h2 { margin: $space-md 0 $space-xxl; diff --git a/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx b/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx index 11814765a..c2ab37bd4 100644 --- a/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx +++ b/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx @@ -1,9 +1,10 @@ import { Dictionary } from 'lodash' -import { FC, Fragment, ReactNode } from 'react' +import { ChangeEvent, FC, Fragment, ReactNode, useMemo } from 'react' import classNames from 'classnames' import { LearnCertification, LearnUserCertificationProgress } from '../../learn-lib' import { CoursesCard } from '../courses-card' +import { FilterBar } from '../filter-bar' import styles from './AvailableCoursesList.module.scss' @@ -13,6 +14,7 @@ interface AvailableCoursesListProps { certificationsGroups: Array selectedCategory: string certificationsProgresses: ReadonlyArray + onSelectCategory: (e: ChangeEvent) => void } const AvailableCoursesList: FC = (props: AvailableCoursesListProps) => { @@ -41,6 +43,20 @@ const AvailableCoursesList: FC = (props: AvailableCou ) + // compute all the available category dropdown options + const certsCategoriesOptions: Array<{ + label: string, + value: string, + }> = useMemo(() => [ + { label: 'All Categories', orderIndex: -1, value: '' }, + ...Object.keys(props.certsByCategory) + .sort() + .map(c => ({ + label: c, + value: c, + })), + ], [props.certsByCategory]) + return (
@@ -52,6 +68,11 @@ const AvailableCoursesList: FC = (props: AvailableCou +
diff --git a/src-ts/tools/learn/welcome/filter-bar/FilterBar.module.scss b/src-ts/tools/learn/welcome/filter-bar/FilterBar.module.scss index 1a1704a98..41a35eaf4 100644 --- a/src-ts/tools/learn/welcome/filter-bar/FilterBar.module.scss +++ b/src-ts/tools/learn/welcome/filter-bar/FilterBar.module.scss @@ -3,7 +3,6 @@ .coursesListFilters { display: flex; margin-left: auto; - margin-top: $space-xxxxl; gap: $space-xxl; diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss index 2de7671c9..dcccd4404 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss +++ b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss @@ -4,6 +4,7 @@ display: flex; flex-direction: column; margin-bottom: $space-xxxxl; + margin-top: $space-xxl; @include ltemd { margin-bottom: 0;