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

REFACTOR: Update list components style;

Browse Source 
REFACTOR: Correct loading handling in `AllCategoriesPage`;
REFACTOR: Update to `ResultsPage`
This commit is contained in:
Chris-1010
2025-02-26 13:25:40 +00:00
parent d36eaffafb
commit 379140852a
4 changed files with 105 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,13 +26,13 @@ const ListItem: React.FC<ListItemProps> = ({
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`}
className={`group relative w-fit flex flex-col bg-purple-900 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((27vw+27vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 z-50 transition-all`}
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"
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
/>
<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
{title}
@@ -50,7 +50,7 @@ const ListItem: React.FC<ListItemProps> = ({
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-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-purple-600 hover:scale-105 transition-all`}
onClick={onItemClick}
>
<div className="relative w-full aspect-video overflow-hidden rounded-t-lg">

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

@@ -89,7 +89,7 @@ const ListRow = forwardRef<
return (
<div
className={`${extraClasses} flex w-full relative rounded-[1.5rem] text-white transition-all ${
className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
variant === "search"
? "items-center"
: "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
@@ -134,30 +134,38 @@ const ListRow = forwardRef<
<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`}
wrap ? "flex-wrap justify-between" : "overflow-x-scroll whitespace-nowrap"
} max-w-[95%] items-center w-full mx-auto scroll-smooth scrollbar-hide`}
>
{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
? onItemClick?.(item.username)
: onItemClick?.(item.title)
}
extraClasses={`${itemExtraClasses} w-[20vw]`}
/>
))}
{currentItems.length === 0 ? (
<h1 className="mx-auto">Nothing Found</h1>
) : (
<>
{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
? onItemClick?.(item.username)
: onItemClick?.(item.title)
}
extraClasses={`${itemExtraClasses}`}
/>
))}
</>
)}
</div>
</div>
{children}