82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import ListRow from "../components/Layout/ListRow";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useStreams, useCategories } from "../context/ContentContext";
|
|
import Button from "../components/Input/Button";
|
|
import DynamicPageContent from "../components/Layout/DynamicPageContent";
|
|
|
|
interface HomePageProps {
|
|
variant?: "default" | "personalised";
|
|
}
|
|
|
|
const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
|
|
const { streams } = useStreams();
|
|
const { categories } = useCategories();
|
|
const navigate = useNavigate();
|
|
|
|
const handleStreamClick = (streamerName: string) => {
|
|
window.location.href = `/${streamerName}`;
|
|
};
|
|
|
|
const handleCategoryClick = (categoryName: string) => {
|
|
navigate(`/category/${categoryName}`);
|
|
};
|
|
|
|
if (!categories || categories.length === 0) {
|
|
return <div>Loading categories...</div>;
|
|
}
|
|
|
|
return (
|
|
<DynamicPageContent
|
|
navbarVariant="home"
|
|
className="h-full min-h-screen bg-[url(/images/background-pattern.svg)] animate-moving_bg"
|
|
>
|
|
<ListRow
|
|
type="stream"
|
|
title={
|
|
"Streams - Live Now" +
|
|
(variant === "personalised" ? " - Recommended" : "")
|
|
}
|
|
description={
|
|
variant === "personalised"
|
|
? "We think you might like these streams - Streamers recommended for you"
|
|
: "Popular streamers that are currently live!"
|
|
}
|
|
items={streams}
|
|
wrap={false}
|
|
onItemClick={handleStreamClick}
|
|
extraClasses="bg-[var(--liveNow)]"
|
|
/>
|
|
|
|
{/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
|
|
<ListRow
|
|
type="category"
|
|
title={
|
|
variant === "personalised"
|
|
? "Followed Categories"
|
|
: "Trending Categories"
|
|
}
|
|
description={
|
|
variant === "personalised"
|
|
? "Current streams from your followed categories"
|
|
: "Recently popular categories lately!"
|
|
}
|
|
items={categories}
|
|
wrap={false}
|
|
onItemClick={handleCategoryClick}
|
|
titleClickable={true}
|
|
extraClasses="bg-[var(--recommend)]"
|
|
>
|
|
<Button
|
|
extraClasses="absolute right-10"
|
|
onClick={() => navigate("/categories")}
|
|
>
|
|
Show More
|
|
</Button>
|
|
</ListRow>
|
|
</DynamicPageContent>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|