Update discoverContent.tsx

This commit is contained in:
Ivan Evans 2024-12-27 17:18:04 -07:00
parent 923f99fe7a
commit 4029b85e90

View file

@ -561,7 +561,7 @@ export function DiscoverContent() {
// https://tailwindcss.com/docs/border-style // https://tailwindcss.com/docs/border-style
return ( return (
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
<h2 className="mt-2 text-2xl cursor-default font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-5"> <h2 className="mt-2 text-2xl cursor-default font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-5 text-balance">
{displayCategory} {displayCategory}
</h2> </h2>
<div <div
@ -957,7 +957,7 @@ export function DiscoverContent() {
</div> </div>
) : ( ) : (
<div className="flex items-center inline-block"> <div className="flex items-center inline-block">
<span>Watch Something New</span> <span>Watch Something Random</span>
<img <img
src="/lightbar-images/dice.svg" src="/lightbar-images/dice.svg"
alt="Small Image" alt="Small Image"
@ -996,7 +996,7 @@ export function DiscoverContent() {
{/* Dropdown options */} {/* Dropdown options */}
{isDropdownOpen && ( {isDropdownOpen && (
<ul className="absolute top-full z-50 mb-1 rounded-lg bg-dropdown-background py-3 px-5 text-left text-white shadow-md border-2 border-gray-800 focus:outline-none tabbable cursor-pointer"> <ul className="absolute top-full mb-1 rounded-lg bg-dropdown-background py-3 px-5 text-left text-white shadow-md border-2 border-gray-800 focus:outline-none tabbable cursor-pointer z-50">
<li <li
className={`cursor-pointer p-2 hover:text-gray-300 ${selectedCategory === "movies" ? "font-bold" : ""}`} className={`cursor-pointer p-2 hover:text-gray-300 ${selectedCategory === "movies" ? "font-bold" : ""}`}
onClick={() => handleCategoryChange("movies")} onClick={() => handleCategoryChange("movies")}
@ -1016,7 +1016,7 @@ export function DiscoverContent() {
{/* Render Movies */} {/* Render Movies */}
{selectedCategory === "movies" && ( {selectedCategory === "movies" && (
<> <>
<div className="flex justify-center overflow-x-auto -mx-6"> <div className="flex justify-center overflow-x-auto">
{isMobile && ( {isMobile && (
<div className=""> <div className="">
{renderScrollButton("providers", "left")} {renderScrollButton("providers", "left")}
@ -1024,7 +1024,7 @@ export function DiscoverContent() {
)} )}
<div <div
id="button-carousel-providers" id="button-carousel-providers"
className="flex mb-4 overflow-x-auto scroll-smooth" className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth z-40"
style={{ style={{
scrollbarWidth: "thin", scrollbarWidth: "thin",
scrollbarColor: "transparent transparent", scrollbarColor: "transparent transparent",
@ -1040,11 +1040,11 @@ export function DiscoverContent() {
</div> </div>
)} )}
</div> </div>
<div className="flex mb-4 overflow-x-auto -mx-6"> <div className="flex mb-4 overflow-x-auto">
<div className="">{renderScrollButton("movies", "left")}</div> <div className="">{renderScrollButton("movies", "left")}</div>
<div <div
id="button-carousel-movies" id="button-carousel-movies"
className="flex mb-4 overflow-x-auto scroll-smooth" className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
style={{ style={{
scrollbarWidth: "thin", scrollbarWidth: "thin",
scrollbarColor: "transparent transparent", scrollbarColor: "transparent transparent",
@ -1063,7 +1063,7 @@ export function DiscoverContent() {
{/* Render Shows */} {/* Render Shows */}
{selectedCategory === "tvshows" && ( {selectedCategory === "tvshows" && (
<> <>
<div className="flex justify-center overflow-x-auto -mx-6"> <div className="flex justify-center overflow-x-auto">
{isMobile && ( {isMobile && (
<div className=""> <div className="">
{renderScrollButton("tv-providers", "left")} {renderScrollButton("tv-providers", "left")}
@ -1071,7 +1071,7 @@ export function DiscoverContent() {
)} )}
<div <div
id="button-carousel-tv-providers" id="button-carousel-tv-providers"
className="flex mb-4 overflow-x-auto scroll-smooth" className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth z-40"
style={{ style={{
scrollbarWidth: "thin", scrollbarWidth: "thin",
scrollbarColor: "transparent transparent", scrollbarColor: "transparent transparent",
@ -1087,11 +1087,11 @@ export function DiscoverContent() {
</div> </div>
)} )}
</div> </div>
<div className="flex mb-4 overflow-x-auto -mx-6"> <div className="flex mb-4 overflow-x-auto">
<div className="">{renderScrollButton("tvshows", "left")}</div> <div className="">{renderScrollButton("tvshows", "left")}</div>
<div <div
id="button-carousel-tvshows" id="button-carousel-tvshows"
className="flex mb-4 overflow-x-auto scroll-smooth" className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
style={{ style={{
scrollbarWidth: "thin", scrollbarWidth: "thin",
scrollbarColor: "transparent transparent", scrollbarColor: "transparent transparent",