63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { faArrowUp, faArrowUp91, faArrowUpAZ, faArrowUpShortWide, faChessKnight, faMoon, faSun, faUpLong } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { useAtom } from "jotai";
|
|
import { useEffect, useState } from "react";
|
|
import { themeAtom } from "../_lib/atom";
|
|
import { Tooltip } from "antd";
|
|
|
|
|
|
export default function CustomAffix() {
|
|
const [show, setShow] = useState(false);
|
|
const [theme, setTheme] = useAtom(themeAtom)
|
|
const handleScroll = () => {
|
|
const distance = {
|
|
x: document.documentElement.scrollLeft || document.body.scrollLeft,
|
|
y: document.documentElement.scrollTop || document.body.scrollTop
|
|
};
|
|
console.log(distance);
|
|
if (distance.y > 600) {
|
|
setShow(true);
|
|
} else {
|
|
setShow(false)
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
return (
|
|
<div className="fixed z-10 bottom-10 right-10 flex flex-col gap-y-2 p-2 rounded-xl ">
|
|
{
|
|
show &&
|
|
<div
|
|
onClick={() => {
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="w-[40px] h-[40px] group bg-[#000]/20 backdrop-blur-md cursor-pointer hover:scale-105 duration-150 rounded-full flex justify-center items-center">
|
|
<FontAwesomeIcon icon={faArrowUp} className="text-[#666] group-hover:text-[#333]"></FontAwesomeIcon>
|
|
</div>
|
|
|
|
}
|
|
<Tooltip title={theme === 'light' ? "深色模式" : "浅色模式"} placement="left">
|
|
<div
|
|
onClick={() => {
|
|
if (theme === "dark") {
|
|
setTheme("light")
|
|
} else {
|
|
setTheme("dark")
|
|
|
|
}
|
|
}}
|
|
className="w-[40px] h-[40px] group bg-[#000]/20 backdrop-blur-md cursor-pointer hover:scale-105 duration-150 rounded-full flex justify-center items-center">
|
|
<FontAwesomeIcon icon={theme === 'dark' ? faSun : faMoon} className="text-[#666] group-hover:text-[#333]"></FontAwesomeIcon>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
</div>
|
|
)
|
|
} |