ADD: All Vods on Home Page

ToDo:
Thumbnail in DB
Save user stream to Vod

frontend/src/components/Layout/ListItem.tsx

@@ -2,13 +2,14 @@ import React from "react";
 import { StreamType } from "../../types/StreamType";
 import { CategoryType } from "../../types/CategoryType";
 import { UserType } from "../../types/UserType";
+import { VodType } from "../../types/VodType";
 
 // Base props that all item types share
 interface BaseListItemProps {
   onItemClick?: () => void;
   extraClasses?: string;
 }
-
+  
 // Stream item component
 interface StreamListItemProps extends BaseListItemProps, Omit<StreamType, 'type'> {}
 
@@ -124,6 +125,52 @@ const UserListItem: React.FC<UserListItemProps> = ({
   );
 };
 
+// VODs item component
+interface VodListItemProps extends BaseListItemProps, Omit<VodType, "type"> {}
+
+const VodListItem: React.FC<VodListItemProps> = ({
+  title,
+  streamer,
+  datetime,
+  category,
+  length,
+  views,
+  thumbnail,
+  url,
+  onItemClick,
+  extraClasses = "",
+}) => {
+  return (
+    <div className="p-4">
+      <div
+        className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 transition-all`}
+        onClick={() => window.open(url, "_blank")}
+      >
+        <div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
+          {thumbnail ? (
+            <img
+              src={thumbnail}
+              alt={title}
+              className="absolute top-0 left-0 w-full h-full object-cover"
+            />
+          ) : (
+            <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
+          )}
+        </div>
+        <div className="p-3">
+          <h3 className="font-semibold text-lg text-center truncate max-w-full">
+            {title}
+          </h3>
+          <p className="font-bold">{streamer}</p>
+          <p className="text-sm text-gray-300">{category}</p>
+          <p className="text-sm text-gray-300">{new Date(datetime).toLocaleDateString()} | {length} mins</p>
+          <p className="text-sm text-gray-300">{views} views</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 // Legacy wrapper component for backward compatibility
 export interface ListItemProps {
   type: "stream" | "category" | "user";
@@ -138,4 +185,4 @@ export interface ListItemProps {
   isLive?: boolean;
 }
 
-export { StreamListItem, CategoryListItem, UserListItem };
+export { StreamListItem, CategoryListItem, UserListItem, VodListItem };