feat(project): add playlist screen and container

src/containers/Playlist/Playlist.module.scss

@@ -0,0 +1,4 @@
+.playlist {
+    color: var(--primary-color);
+    font-family: var(--body-alt-font-family);
+  }

src/containers/Playlist/Playlist.test.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import Playlist from './Playlist';
+
+describe('<Playlist>', () => {
+    it.skip('renders with heading', () => {
+        const { getByText } = render(<Playlist playlistId="123" />);
+        expect(getByText(/aa/i)).toBeTruthy();
+    });
+});

src/containers/Playlist/Playlist.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import styles from './Playlist.module.scss';
+
+type PlaylistContainerProps = {
+    playlistId: string;
+};
+
+function Playlist({ playlistId }: PlaylistContainerProps): JSX.Element {
+    return (
+        <div className={styles.playlist}>
+            <header className={styles.playlistHeader}>
+                <h2 className={styles.playlistTitle}>All films</h2>
+                <div className={styles.playlistCategory} />
+            </header>
+            <main className={styles.playlistGrid} />
+        </div>
+    );
+}
+
+export default Playlist;

src/screens/Playlist/Playlist.module.scss

@@ -0,0 +1,3 @@
+.playlist {
+    padding-top: 20px;
+  }

src/screens/Playlist/Playlist.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import PlaylistContainer from '../../containers/Playlist/Playlist'
+
+import styles from './Playlist.module.scss';
+
+
+function Playlist() {
+    return (
+        <div className={styles.playlist}>
+            <PlaylistContainer playlistId="sR5VypYk" />
+        </div>
+    );
+}
+
+export default Playlist;