PulseApp/docs
PulseApp/docs
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Activity

on this page scroll to top button
Some checks failed
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Has been cancelled
Details

Browse Source 
Took 11 minutes
This commit is contained in:
Braydon 2024-10-07 12:57:15 -04:00
parent b7a5665036
commit 8cb3a38beb
1 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/on-this-page.tsx
View File

@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
import { truncateText } from "@/lib/string"; import { truncateText } from "@/lib/string";
import { motion, useInView } from "framer-motion"; import { motion, useInView } from "framer-motion";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import Image from "next/image"; import { Button } from "@/components/ui/button";
type Header = { type Header = {
id: string; id: string;
@ -137,25 +137,50 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
); );
}; };
const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => ( const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => {
<footer className="flex flex-col text-xs opacity-75"> const [hasScrolled, setHasScrolled] = useState<boolean>(false);
{/* Edit on Git */}
<Link useEffect(() => {
className="flex gap-1.5 items-center hover:opacity-75 transition-all transform-gpu group" const handleScroll = () => setHasScrolled(window.scrollY > 400);
href={`https://git.rainnny.club/PulseApp/docs/src/branch/master/docs/${page.slug}.md`} window.addEventListener("scroll", handleScroll);
target="_blank" return () => window.removeEventListener("scroll", handleScroll);
draggable={false} }, []);
>
<Image return (
src="/media/github.svg" <footer className="flex flex-col opacity-75">
alt="GitHub Logo" {/* Edit on Git */}
width={13} <Link
height={13} className="flex gap-1.5 items-center text-xs hover:opacity-75 transition-all transform-gpu group"
/> href={`https://git.rainnny.club/PulseApp/docs/src/branch/master/docs/${page.slug}.md`}
<span>Edit this page on GitHub</span> target="_blank"
<ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" /> draggable={false}
</Link> >
</footer> <span>Edit this page on GitHub</span>
); <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
</Link>
{/* Scroll to Top */}
<div
className={cn(
"transition-opacity transform-gpu",
hasScrolled
? "opacity-100"
: "opacity-0 pointer-events-none"
)}
>
<Button
className="p-0 justify-start flex gap-1.5 items-center text-xs hover:bg-transparent hover:opacity-75 transition-all transform-gpu group"
variant="ghost"
onClick={() =>
window.scrollTo({ top: 0, behavior: "smooth" })
}
>
<span>Scroll to Top</span>
<ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
</Button>
</div>
</footer>
);
};
export default OnThisPage; export default OnThisPage;