CLXP-72 Create a playlist detail page for learner

[HuyIT9898]

Purpose: Create a playlist detail page for learner

review app: https://6628d2e0fd4aa63f3be2e1ab-ipumdkurve.chromatic.com/?path=/story/template-playlistdetail--default

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 93.37%. Comparing base (78f8745) to head (1b3877c). Report is 7 commits behind head on master.

Additional details and impacted files

[](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) ```diff @@ Coverage Diff @@ ## master #2883 +/- ## ========================================== - Coverage 95.50% 93.37% -2.14% ========================================== Files 513 410 -103 Lines 8484 6357 -2127 Branches 435 436 +1 ========================================== - Hits 8103 5936 -2167 - Misses 337 340 +3 - Partials 44 81 +37 ``` | [Files with missing lines](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) | Coverage Δ | | |---|---|---| | [...onents/src/molecule/playlist-detail-cover/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fplaylist-detail-cover%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9wbGF5bGlzdC1kZXRhaWwtY292ZXIvaW5kZXguanM=) | `100.00% <100.00%> (ø)` | | | [...y-components/src/template/playlist-detail/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Ftemplate%2Fplaylist-detail%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy90ZW1wbGF0ZS9wbGF5bGlzdC1kZXRhaWwvaW5kZXguanM=) | `100.00% <100.00%> (ø)` | | | [...omponents/src/template/skill-detail/all-courses.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Ftemplate%2Fskill-detail%2Fall-courses.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy90ZW1wbGF0ZS9za2lsbC1kZXRhaWwvYWxsLWNvdXJzZXMuanM=) | `67.50% <100.00%> (ø)` | | | [...demy-components/src/template/skill-detail/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Ftemplate%2Fskill-detail%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy90ZW1wbGF0ZS9za2lsbC1kZXRhaWwvaW5kZXguanM=) | `100.00% <100.00%> (ø)` | | | [...orpacademy-components/src/util/external-content.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Futil%2Fexternal-content.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy91dGlsL2V4dGVybmFsLWNvbnRlbnQuanM=) | `100.00% <100.00%> (ø)` | | ... and [136 files with indirect coverage changes](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) ------ [Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) > `Δ = absolute (impact)`, `ø = not affected`, `? = missing data` > Powered by [Codecov](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). Last update [02c0240...1b3877c](https://app.codecov.io/gh/CoorpAcademy/components/pull/2883?dropdown=coverage&src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy).