ADD MyClips page and VideoCard component

frontend/src/components/video/Playbar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState} from "react";
 import { Volume1, Volume2, VolumeX, Play, Pause } from 'lucide-react';
 import clsx from 'clsx';
 import type { VideoMetadata } from "../../utils/types.ts";
+import { formatTime } from "../../utils/utils.ts";
 
 
 type Props = {
@@ -10,20 +11,6 @@ type Props = {
     className?: string;
 };
 
-function formatTime(seconds: number): string {
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = Math.floor(seconds % 60);
-
-    const padded = (n: number) => n.toString().padStart(2, '0');
-
-    if (h > 0) {
-        return `${h}:${padded(m)}:${padded(s)}`;
-    } else {
-        return `${m}:${padded(s)}`;
-    }
-}
-
 export default function Playbar({ video, videoMetadata, className }: Props) {
     const [isPlaying, setIsPlaying] = useState(false);
     const [volume, setVolume] = useState(100);

frontend/src/components/video/VideoCard.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { formatTime } from "../../utils/utils.ts";
+import {Link} from "react-router-dom";
+
+type VideoCardProps = {
+    title: string,
+    length: number,
+    thumbnailUrl: string,
+    videoUrl: string,
+    className?: string
+}
+
+const VideoCard = ({
+                       title,
+                       length,
+                       thumbnailUrl,
+                       videoUrl,
+                       className}: VideoCardProps) => {
+    return (
+        <Link
+        to={videoUrl}
+        >
+            <div className={clsx("flex flex-col", className)}>
+                <img src={thumbnailUrl} alt="Video Thumbnail" />
+
+                <div className={"flex flex-row justify-between items-center p-2"}>
+                    <p>{title}</p>
+                    <p>{formatTime(length)}</p>
+                </div>
+
+            </div>
+        </Link>
+    );
+}
+
+export default VideoCard;