Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-11 17:55:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make renderButtons a dropdown

Browse source
This commit is contained in:
Ivan Evans 2024-09-25 13:17:48 -06:00
parent 886f3eb72e
commit ec3b961610
1 changed files with 63 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/utils/discoverContent.tsx
View file

@ -160,6 +160,16 @@ export function DiscoverContent() {
const [editorPicksData, setEditorPicksData] = useState<Media[]>([]);
// New state to track selected category (movies or TV shows)
const [selectedCategory, setSelectedCategory] = useState("movies");
// Handle category change
const handleCategoryChange = (
event: React.ChangeEvent<HTMLSelectElement>,
) => {
setSelectedCategory(event.target.value);
};
useEffect(() => {
// Function to shuffle array
const shuffleArray = (array: any[]) => {
@ -877,49 +887,64 @@ export function DiscoverContent() {
</div>
)}
<div className="mt-8 p-4 w-full max-w-screen-xl mx-auto">
<h2 className="text-2xl font-bold mb-4 text-center">Movies:</h2>
<div className="flex mb-4 overflow-x-auto">
{!isMobile && <div>{renderScrollButton("movies", "left")}</div>}
<div
id="button-carousel-movies"
className="flex mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
{/* Dropdown for selecting the category */}
<div className="flex justify-center mb-4">
<select
className="text-2xl font-bold p-2 bg-transparent text-center cursor-pointer"
value={selectedCategory}
onChange={handleCategoryChange}
>
<div className="flex space-x-2 py-1">
{renderTopMovieButtons()}
{renderMovieButtons()}
</div>
</div>
{!isMobile && (
<div className="">{renderScrollButton("movies", "right")}</div>
)}
<option value="movies">Movies</option>
<option value="tvshows">TV Shows</option>
</select>
</div>
<h2 className="text-2xl font-bold mb-4 text-center">TV Shows:</h2>
<div className="flex mb-4 overflow-x-auto">
{!isMobile && (
<div className="">{renderScrollButton("tvshows", "left")}</div>
)}
<div
id="button-carousel-tvshows"
className="flex mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTopTvButtons()}
{renderTvButtons()}
{/* Conditionally render Movies or TV Shows based on selectedCategory */}
{selectedCategory === "movies" && (
<div className="flex mb-4 overflow-x-auto">
{!isMobile && <div>{renderScrollButton("movies", "left")}</div>}
<div
id="button-carousel-movies"
className="flex mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTopMovieButtons()}
{renderMovieButtons()}
</div>
</div>
{!isMobile && (
<div className="">{renderScrollButton("movies", "right")}</div>
)}
</div>
{!isMobile && (
<div className="">{renderScrollButton("tvshows", "right")}</div>
)}
</div>
)}
{selectedCategory === "tvshows" && (
<div className="flex mb-4 overflow-x-auto">
{!isMobile && (
<div className="">{renderScrollButton("tvshows", "left")}</div>
)}
<div
id="button-carousel-tvshows"
className="flex mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTopTvButtons()}
{renderTvButtons()}
</div>
</div>
{!isMobile && (
<div className="">{renderScrollButton("tvshows", "right")}</div>
)}
</div>
)}
</div>
<div className="">
<div className="flex items-center mt-5">