REFACTOR: Add extraClasses prop to ListItem;

REFACTOR: Remove unused `Navbar` import in `UserPage`;

frontend/src/components/Layout/ListItem.tsx

@@ -9,6 +9,7 @@ export interface ListItemProps {
   viewers: number;
   thumbnail?: string;
   onItemClick?: () => void;
+  extraClasses?: string;
 }
 
 const ListItem: React.FC<ListItemProps> = ({
@@ -19,12 +20,12 @@ const ListItem: React.FC<ListItemProps> = ({
   viewers,
   thumbnail,
   onItemClick,
+  extraClasses = "",
 }) => {
   return (
     <div className="p-4">
       <div
-        className="min-w-[20vw] overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg 
-	   cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all"
+        className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-pink-700 hover:scale-105 transition-all`}
         onClick={onItemClick}
       >
         <div className="relative w-full pt-[56.25%] overflow-hidden rounded-t-lg">

frontend/src/components/Layout/ListRow.tsx

@@ -14,6 +14,7 @@ interface ListRowProps {
   wrap: boolean;
   onClick: (itemName: string) => void;
   extraClasses?: string;
+  itemExtraClasses?: string;
   children?: React.ReactNode;
 }
 
@@ -25,6 +26,7 @@ const ListRow: React.FC<ListRowProps> = ({
   wrap,
   onClick,
   extraClasses = "",
+  itemExtraClasses = "",
   children,
 }) => {
   const slider = useRef<HTMLDivElement>(null);
@@ -91,6 +93,7 @@ const ListRow: React.FC<ListRowProps> = ({
                   ? onClick?.(item.streamer)
                   : onClick?.(item.title)
               }
+              extraClasses={`${itemExtraClasses} min-w-[25vw]`}
             />
           ))}
         </div>

frontend/src/pages/UserPage.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import Navbar from "../components/Navigation/Navbar";
 import AuthModal from "../components/Auth/AuthModal";
 import { useAuthModal } from "../hooks/useAuthModal";
 import { useAuth } from "../context/AuthContext";