small fix

This commit is contained in:
Tejas Panchal
2025-07-30 21:08:16 +05:30
parent ef1746a716
commit 42623886a3

View File

@@ -138,28 +138,26 @@ function Episodelist({
return (
<div className="flex flex-col w-full h-full">
<div className="sticky top-0 z-10 flex flex-col gap-y-[5px] justify-start px-4 py-3 bg-[#1a1a1a] border-b border-[#2a2a2a]">
<h1 className="text-[14px] font-semibold text-white mb-1">Episodes</h1>
<div className="sticky top-0 z-10 flex items-center justify-between px-4 py-3 bg-[#1a1a1a] border-b border-[#2a2a2a]">
<div className="flex items-center gap-4">
<h1 className="text-[14px] font-semibold text-white">Episodes</h1>
{totalEpisodes > 100 && (
<div className="w-full flex gap-x-4 items-center max-[1200px]:justify-between">
<div className="min-w-fit flex text-[13px]">
<div className="flex items-center">
<div
onClick={() => setShowDropDown((prev) => !prev)}
className="text-gray-300 w-fit mt-1 text-[13px] relative cursor-pointer flex justify-center items-center hover:text-white transition-colors"
className="text-gray-300 relative cursor-pointer flex items-center gap-2 hover:text-white transition-colors"
ref={dropDownRef}
>
<FontAwesomeIcon icon={faList} className="text-gray-400" />
<div className="w-fit flex justify-center items-center gap-x-2 ml-4">
<p className="text-[12px]">
{selectedRange[0]}-{selectedRange[1]}
</p>
<FontAwesomeIcon
icon={faAngleDown}
className="mt-[2px] text-[10px]"
className="text-[10px]"
/>
</div>
{showDropDown && (
<div className="absolute flex flex-col top-full mt-[10px] left-0 z-30 bg-[#2a2a2a] w-[150px] max-h-[200px] overflow-y-auto rounded-lg border border-[#3a3a3a] shadow-lg">
<div className="absolute top-full mt-2 left-0 z-30 bg-[#2a2a2a] w-[150px] max-h-[200px] overflow-y-auto rounded-lg border border-[#3a3a3a] shadow-lg">
{generateRangeOptions(totalEpisodes).map((item, index) => (
<div
key={index}
@@ -183,14 +181,19 @@ function Episodelist({
)}
</div>
</div>
<div className="border border-[#3a3a3a] rounded-lg py-2 px-3 flex items-center gap-x-3 bg-[#2a2a2a] focus-within:border-gray-500 transition-colors">
)}
</div>
{totalEpisodes > 100 && (
<div className="flex items-center min-w-[180px]">
<div className="w-full flex items-center gap-2 px-3 py-1.5 bg-[#2a2a2a] rounded-lg border border-[#3a3a3a] focus-within:border-gray-500 transition-colors">
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="text-[12px] text-gray-400"
/>
<input
type="text"
className="w-full bg-transparent focus:outline-none rounded-sm text-[13px] text-white placeholder:text-gray-500"
className="w-full bg-transparent focus:outline-none text-[13px] text-white placeholder:text-gray-500"
placeholder="Go to episode..."
onChange={handleChange}
/>
@@ -198,6 +201,7 @@ function Episodelist({
</div>
)}
</div>
<div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a]">
<div
className={`${