dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Finished categories and category pages, added infinite scrolling and follow category button on login

Browse Source
This commit is contained in:
JustIceO7
2025-02-23 17:23:09 +00:00
parent f192518382
commit 634c02a9bc
17 changed files with 341 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Layout/ListItem.tsx
View File

@@ -65,7 +65,7 @@ const ListItem: React.FC<ListItemProps> = ({
)}
</div>
<div className="p-3">
<h3 className="font-semibold text-lg text-center">{title}</h3>
<h3 className="font-semibold text-lg text-center truncate max-w-full">{title}</h3>
{type === "stream" && <p className="font-bold">{username}</p>}
{type === "stream" && (
<p className="text-sm text-gray-300">{streamCategory}</p>

216
frontend/src/components/Layout/ListRow.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
import {
ArrowLeft as ArrowLeftIcon,
ArrowRight as ArrowRightIcon,
@@ -22,124 +22,120 @@ interface ListRowProps {
children?: React.ReactNode;
}
// Row of entries
const ListRow: React.FC<ListRowProps> = ({
variant = "default",
type,
title = "",
description = "",
items,
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 ListRow = forwardRef<{ addMoreItems: (newItems: ListItemProps[]) => void }, ListRowProps>(
({ variant, type, title = "", description = "", items, wrap, onClick, titleClickable, extraClasses = "", itemExtraClasses = "", amountForScroll, children }, ref) => {
const [currentItems, setCurrentItems] = useState(items);
const slider = useRef<HTMLDivElement>(null);
const scrollAmount = window.innerWidth * 0.3;
const navigate = useNavigate();
const slideRight = () => {
if (!wrap && slider.current) {
slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
}
};
const addMoreItems = (newItems: ListItemProps[]) => {
setCurrentItems((prevItems) => [...prevItems, ...newItems]);
};
const slideLeft = () => {
if (!wrap && slider.current) {
slider.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
}
};
useImperativeHandle(ref, () => ({
addMoreItems,
}));
const handleTitleClick = (type: string) => {
switch (type) {
case "stream":
break;
case "category":
navigate("/categories");
break;
case "user":
break;
default:
break;
}
};
const slideRight = () => {
if (!wrap && slider.current) {
slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
}
};
return (
<div
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"
}`}
>
const slideLeft = () => {
if (!wrap && slider.current) {
slider.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
}
};
const handleTitleClick = (type: string) => {
switch (type) {
case "stream":
break;
case "category":
navigate("/categories");
break;
case "user":
break;
default:
break;
}
};
return (
<div
className={`text-center ${
variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
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"
}`}
>
<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 flex-grow items-center z-0">
{!wrap && items.length > amountForScroll && (
<>
<ArrowLeftIcon
onClick={slideLeft}
size={30}
className="absolute left-0 cursor-pointer z-[999]"
/>
<ArrowRightIcon
onClick={slideRight}
size={30}
className="absolute right-0 cursor-pointer z-[999]"
/>
</>
)}
<div
ref={slider}
className={`flex ${
wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
} max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`}
className={`text-center ${
variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
}`}
>
{items.map((item) => (
<ListItem
key={`${item.type}-${item.id}`}
id={item.id}
type={type}
title={item.title}
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.type === "user") &&
item.username
? onClick?.(item.username)
: onClick?.(item.title)
}
extraClasses={`${itemExtraClasses} min-w-[20vw]`}
/>
))}
<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 flex-grow items-center z-0">
{!wrap && currentItems.length > (amountForScroll || 0) && (
<>
<ArrowLeftIcon
onClick={slideLeft}
size={30}
className="absolute left-0 cursor-pointer z-[999]"
/>
<ArrowRightIcon
onClick={slideRight}
size={30}
className="absolute right-0 cursor-pointer z-[999]"
/>
</>
)}
<div
ref={slider}
className={`flex ${
wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
} max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`}
>
{currentItems.map((item) => (
<ListItem
key={`${item.type}-${item.id}`}
id={item.id}
type={type}
title={item.title}
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.type === "user") &&
item.username
? onClick?.(item.username)
: onClick?.(item.title)
}
extraClasses={`${itemExtraClasses} min-w-[20vw] max-w-[20vw]`}
/>
))}
</div>
</div>
{children}
</div>
);
}
);
{children}
</div>
);
};
export default ListRow;
export default ListRow;