feat(project): add title and tag to card component

src/components/Card/Card.module.scss

@@ -1,7 +1,12 @@
-.root {
+.poster {
   position: relative;
   overflow: hidden;
   width: 100%;
+  background-color: var(--card-slider-loading-card-bg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
 }
 
 .oneOne {
@@ -28,16 +33,26 @@
   padding-bottom: (9 / 16) * 100%;
 }
 
-.container {
+.videoDurationTag {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--card-slider-loading-card-bg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  bottom: 15px;
+  right: 15px;
+  background-color: var(--card-tag-bg);
+  font-family: var(--body-font-family);
+  padding: 4px 8px;
   border-radius: 4px;
+  color: var(--card-color);
 }
 
+.videoTitle {
+  overflow: hidden;
+  font-family: var(--body-alt-font-family);
+  color: var(--card-color);
+  font-weight: 700;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 8px;
+  margin-bottom: 0px;
+  min-height: 19px;
+}

src/components/Card/Card.test.tsx

@@ -4,9 +4,13 @@ import { render } from '@testing-library/react';
 import Card from './Card';
 
 describe('<Card>', () => {
-  it('renders card', () => {
-    const { getByText } = render(<Card title="aa" duration={120} />);
-    const card = getByText(/card/i);
-    expect(card).toBeTruthy();
+  it('renders card with video title', () => {
+    const { getByText } = render(<Card videoTitle="aa" videoDuration={120} />);
+    expect(getByText(/aa/i)).toBeTruthy();
+  });
+
+  it('renders tag with correct duration', () => {
+    const { getByText } = render(<Card videoTitle="aa" videoDuration={120} />);
+    expect(getByText(/2/i)).toBeTruthy();
   });
 });

src/components/Card/Card.tsx

@@ -2,28 +2,31 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { ASPECT_RATIO } from '../../enum/Card.js'
+import { formatVideoDuration } from '../../utils/formatting.ts'
 
 import styles from './Card.module.scss';
 
 type CardProps = {
-  title: string;
-  duration: number;
-  imageSource?: string;
+  videoTitle: string;
+  videoDuration: number;
+  posterSource?: string;
   aspectRatio?: string;
 };
 
 function Card({
-  title,
-  duration,
-  imageSource,
+  videoTitle,
+  videoDuration,
+  posterSource,
   aspectRatio = ASPECT_RATIO[16_9],
 }: CardProps): JSX.Element {
+
   return (
-    <div className={classNames(styles.root, styles[aspectRatio])}>
-      <div className={styles.container} style={{ backgroundImage: `url(${imageSource})` }}>
-        <span>Card</span>
+    <div className={styles.root}>
+      <div className={classNames(styles.poster, styles[aspectRatio])} style={{ backgroundImage: `url(${posterSource})` }}>
+        {videoDuration && <div className={styles.videoDurationTag}>{formatVideoDuration(videoDuration)}</div>}
       </div>
-    </div >
+      <p className={styles.videoTitle}>{videoTitle}</p>
+    </div>
   );
 }
 

src/styles/main.scss

@@ -2,8 +2,15 @@
 
 :root {
   --primary-color: #{theme.$primary-color};
+
   --body-background-color: #{theme.$body-bg-color};
+  --body-font-family: #{theme.$body-font-family};
+  --body-alt-font-family: #{theme.$body-alt-font-family};
+
+  --card-color: #{theme.$card-color};
+  --card-border-hover-color: #{theme.$card-border-hover-color};
   --card-slider-loading-card-bg: #{theme.$card-slider-loading-card-bg};
+  --card-tag-bg: #{theme.$video-details-tag-bg};
 }
 
 body {

src/utils/formatting.ts

@@ -0,0 +1,11 @@
+const formatVideoDuration = (seconds: number): string | void => {
+    if (!seconds || typeof seconds !== "number") return;
+
+    const minutes = Math.ceil(seconds / 60)
+
+    return `${minutes} min`
+
+
+}
+
+export { formatVideoDuration }