Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-08-19 05:35:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update ScrollToTopButton.tsx

Browse source
This commit is contained in:
Pas 2025-08-01 16:08:19 -06:00
parent 851e134b7f
commit ccf38a2cad
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/pages/discover/components/ScrollToTopButton.tsx
View file

@ -27,28 +27,30 @@ export function ScrollToTopButton() {
};
return (
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
<div className="fixed bottom-9 md:bottom-4 transform -translate-x-1/2 z-50 left-12 md:left-1/2">
<div
className={`absolute inset-0 mx-auto h-[50px] w-[200px] rounded-full blur-[50px] opacity-50 pointer-events-none z-0 ${
isVisible ? "opacity-100 visible" : "opacity-0 invisible"
}`}
style={{
backgroundImage: `linear-gradient(to right, rgba(var(--colors-buttons-purpleHover)), rgba(var(--colors-progress-filled)))`,
transition: "opacity 0.4s ease-in-out, transform 0.4s ease-in-out",
transition: "opacity 0.4s ease-in-out, transform 0.2s ease-in-out",
}}
/>
<button
type="button"
onClick={scrollToTop}
className={`relative backdrop-blur-sm flex items-center justify-center space-x-2 rounded-full px-4 py-3 text-lg font-semibold text-white bg-pill-background bg-opacity-80 hover:bg-pill-backgroundHover transition-opacity hover:scale-105 duration-500 ease-in-out ${
className={`relative backdrop-blur-sm flex items-center justify-center space-x-2 rounded-full px-3 py-3 md:py-2 text-lg font-semibold text-white bg-pill-background bg-opacity-80 hover:bg-pill-backgroundHover transition-opacity hover:scale-105 duration-500 ease-in-out ${
isVisible ? "opacity-100 visible" : "opacity-0 invisible"
}`}
style={{
transition: "opacity 0.4s ease-in-out, transform 0.4s ease-in-out",
transition: "opacity 0.4s ease-in-out, transform 0.2s ease-in-out",
}}
>
<Icon icon={Icons.CHEVRON_UP} className="text-2xl z-10" />
<span className="z-10">{t("discover.scrollToTop")}</span>
<span className="z-10 hidden md:block">
{t("discover.scrollToTop")}
</span>
</button>
</div>
);