xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add back to top component

Browse Source
This commit is contained in:
DefectingCat
2022-11-28 17:46:43 +08:00
parent 5419c78944
commit 9b472ef1ae
4 changed files with 60 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/RUA/Button.tsx
View File

@ -9,6 +9,8 @@ export type ButtonProps = {
>;
const Button = ({ children, ...rest }: ButtonProps) => {
const { className, ...props } = rest;
return (
<>
<button
@ -23,9 +25,10 @@ const Button = ({ children, ...rest }: ButtonProps) => {
'disabled:hover:border-transparent',
'text-lg disabled:bg-gray-200 disabled:text-gray-500',
'dark:disabled:bg-gray-700 dark:disabled:text-gray-300',
'disabled:dark:hover:border-transparent'
'disabled:dark:hover:border-transparent',
className
)}
{...rest}
{...props}
>
{children}
</button>
@ -33,4 +36,4 @@ const Button = ({ children, ...rest }: ButtonProps) => {
);
};
export default Button;
export default Button;

29
components/common/BackToTop.tsx Normal file
View File

@ -0,0 +1,29 @@
import clsx from 'clsx';
import Button from 'components/RUA/Button';
import { FiChevronUp } from 'react-icons/fi';
const BackToTop = () => {
const handleBack = () => {
const target = document.documentElement || document.body;
target.scrollTo({
top: 0,
});
};
return (
<>
<Button
onClick={handleBack}
className={clsx(
'!px-3 fixed',
'right-4 bottom-4',
'lg:right-8 lg:bottom-8'
)}
>
<FiChevronUp className="w-6 h-6" />
</Button>
</>
);
};
export default BackToTop;