feat(project): add hover to card component

src/components/Card/Card.module.scss

@@ -1,3 +1,15 @@
+.root {
+  cursor: pointer;
+  transition: transform .2s ease-out,-webkit-transform .2s ease-out;
+}
+
+.root:hover {
+  transform: scale(1.05);
+  & .poster {
+    box-shadow: 0 0 0 3px var(--card-border-hover-color), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
+  }
+}
+
 .poster {
   position: relative;
   overflow: hidden;
@@ -7,6 +19,8 @@
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
+  transition: box-shadow .1s ease;
+  box-shadow: 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
 }
 
 .oneOne {

src/components/Card/Card.tsx

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

src/utils/formatting.ts

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