UPDATE: Style ResultsPage;

UPDATE: Improve components;

frontend/src/components/Layout/ListItem.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
 export interface ListItemProps {
-  type: "stream" | "category";
+  type: "stream" | "category" | "user";
   id: number;
   title: string;
-  streamer?: string;
+  username?: string;
   streamCategory?: string;
   viewers: number;
   thumbnail?: string;
@@ -15,13 +15,38 @@ export interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({
   type,
   title,
-  streamer,
+  username,
   streamCategory,
   viewers,
   thumbnail,
   onItemClick,
   extraClasses = "",
 }) => {
+  if (type === "user") {
+    return (
+      <div className="p-4 pb-10">
+        <div
+          className={`group relative w-fit flex flex-col bg-blue-600 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((20vw+20vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-blue-800 z-50`}
+          onClick={onItemClick}
+        >
+          <img
+            src="/images/monkey.png"
+            alt={`user ${username}`}
+            className="rounded-xl max-w-[calc((20vw+20vh)/2)] border-[0.15em] border-purple-500 cursor-pointer"
+          />
+          <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
+            {title}
+          </button>
+
+          {title.includes("🔴") && (
+            <p className="absolute font-black bottom-5 opacity-0 group-hover:translate-y-full group-hover:opacity-100 group-hover:-bottom-1 transition-all">
+              Currently Live!
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="p-4">
       <div
@@ -41,7 +66,7 @@ const ListItem: React.FC<ListItemProps> = ({
         </div>
         <div className="p-3">
           <h3 className="font-semibold text-lg text-center">{title}</h3>
-          {type === "stream" && <p className="font-bold">{streamer}</p>}
+          {type === "stream" && <p className="font-bold">{username}</p>}
           {type === "stream" && (
             <p className="text-sm text-gray-300">{streamCategory}</p>
           )}

frontend/src/components/Layout/ListRow.tsx

@@ -5,32 +5,41 @@ import {
 } from "lucide-react";
 import "../../assets/styles/listRow.css";
 import ListItem, { ListItemProps } from "./ListItem";
+import { useNavigate } from "react-router-dom";
 
 interface ListRowProps {
+  variant?: "default" | "search";
   type: "stream" | "category" | "user";
   title?: string;
   description?: string;
   items: ListItemProps[];
-  wrap: boolean;
+  wrap?: boolean;
   onClick: (itemName: string) => void;
+  titleClickable?: boolean;
   extraClasses?: string;
   itemExtraClasses?: string;
+  amountForScroll?: number;
   children?: React.ReactNode;
 }
 
 // Row of entries
 const ListRow: React.FC<ListRowProps> = ({
+  variant = "default",
+  type,
   title = "",
   description = "",
   items,
-  wrap,
+  wrap = false,
+  titleClickable = false,
   onClick,
   extraClasses = "",
   itemExtraClasses = "",
+  amountForScroll = 4,
   children,
 }) => {
   const slider = useRef<HTMLDivElement>(null);
   const scrollAmount = window.innerWidth * 0.3;
+  const navigate = useNavigate();
 
   const slideRight = () => {
     if (!wrap && slider.current) {
@@ -44,17 +53,46 @@ const ListRow: React.FC<ListRowProps> = ({
     }
   };
 
+  const handleTitleClick = (type: string) => {
+    switch (type) {
+      case "stream":
+        break;
+      case "category":
+        navigate("/categories");
+        break;
+      case "user":
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <div
-      className={`flex flex-col w-full space-y-4 py-6 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
+      className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${
+        variant === "search"
+          ? "items-center"
+          : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
+      }`}
     >
-      <div className="space-y-1">
-        <h2 className="text-2xl font-bold">{title}</h2>
+      <div
+        className={`text-center ${
+          variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
+        }`}
+      >
+        <h2
+          className={`${
+            titleClickable ? "cursor-pointer hover:underline" : "cursor-default"
+          } text-2xl font-bold`}
+          onClick={titleClickable ? () => handleTitleClick(type) : undefined}
+        >
+          {title}
+        </h2>
         <p>{description}</p>
       </div>
 
-      <div className="relative overflow-hidden flex items-center z-0">
-        {!wrap && items.length > 4 && (
+      <div className="relative overflow-hidden flex flex-grow items-center z-0">
+        {!wrap && items.length > amountForScroll && (
           <>
             <ArrowLeftIcon
               onClick={slideLeft}
@@ -73,24 +111,24 @@ const ListRow: React.FC<ListRowProps> = ({
           ref={slider}
           className={`flex ${
             wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
-          } max-w-[95%] items-center justify-between scroll-smooth scrollbar-hide gap-5 mx-auto`}
+          } max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`}
         >
-
           {items.map((item) => (
             <ListItem
               key={`${item.type}-${item.id}`}
               id={item.id}
-              type={item.type}
+              type={type}
               title={item.title}
-              streamer={item.type === "stream" ? item.streamer : undefined}
+              username={item.type === "category" ? undefined : item.username}
               streamCategory={
                 item.type === "stream" ? item.streamCategory : undefined
               }
               viewers={item.viewers}
               thumbnail={item.thumbnail}
               onItemClick={() =>
-                item.type === "stream" && item.streamer
-                  ? onClick?.(item.streamer)
+                (item.type === "stream" || item.type === "user") &&
+                item.username
+                  ? onClick?.(item.username)
                   : onClick?.(item.title)
               }
               extraClasses={`${itemExtraClasses} min-w-[20vw]`}
@@ -104,4 +142,4 @@ const ListRow: React.FC<ListRowProps> = ({
   );
 };
 
-export default ListRow;
+export default ListRow;

frontend/src/components/Layout/Logo.tsx

@@ -2,17 +2,21 @@ import React from "react";
 
 interface LogoProps {
   variant?: "home" | "default";
+  extraClasses?: string;
 }
 
-const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
+const Logo: React.FC<LogoProps> = ({
+  variant = "default",
+  extraClasses = "",
+}) => {
   const gradient = "text-transparent group-hover:mx-1 transition-all";
   return (
     <div
       id="logo"
-      className={`group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
+      className={`${extraClasses} group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
         variant === "home" ? "text-[12vh]" : "text-[4vh]"
       }`}
-      onClick={() => {window.location.href = "/";}}
+      onClick={() => (window.location.href = "/")}
     >
       <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
         Go on, have a...