Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-29 14:03:17 +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

29
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,7 +887,20 @@ 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>
{/* 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}
>
<option value="movies">Movies</option>
<option value="tvshows">TV Shows</option>
</select>
</div>
{/* 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
@ -897,8 +920,9 @@ export function DiscoverContent() {
<div className="">{renderScrollButton("movies", "right")}</div>
)}
</div>
)}
<h2 className="text-2xl font-bold mb-4 text-center">TV Shows:</h2>
{selectedCategory === "tvshows" && (
<div className="flex mb-4 overflow-x-auto">
{!isMobile && (
<div className="">{renderScrollButton("tvshows", "left")}</div>
@ -920,6 +944,7 @@ export function DiscoverContent() {
<div className="">{renderScrollButton("tvshows", "right")}</div>
)}
</div>
)}
</div>
<div className="">
<div className="flex items-center mt-5">