| 1 | import { ArrowUpIcon } from '@primer/octicons-react' |
| 2 | import { useCallback } from 'react' |
| 3 | |
| 4 | export const ScrollToTop = () => { |
| 5 | const handleClick = useCallback<React.MouseEventHandler<HTMLElement>>((e) => { |
| 6 | window.scrollTo({ top: 0 }) |
| 7 | e.currentTarget.blur() |
| 8 | }, []) |
| 9 | |
| 10 | return ( |
| 11 | <div className="scroll-to-top"> |
| 12 | <button onClick={handleClick} title="Scroll to top"> |
| 13 | <ArrowUpIcon className="scroll-to-top-icon" /> |
| 14 | <span className="sr-only">Scroll to top</span> |
| 15 | </button> |
| 16 | <style jsx>{` |
| 17 | .scroll-to-top { |
| 18 | @apply pointer-events-none fixed right-0 bottom-0 z-50; |
| 19 | |
| 20 | filter: drop-shadow(0 0px 7px rgba(0, 0, 0, 0.3)) |
| 21 | drop-shadow(0 0px 4px rgba(0, 0, 0, 0.15)); |
| 22 | } |
| 23 | button { |
| 24 | @apply bg-marp-light pointer-events-auto h-20 w-20 appearance-none align-top text-white; |
| 25 | |
| 26 | clip-path: polygon(100% 0, 100% 100%, 0 100%); |
| 27 | } |
| 28 | button:hover { |
| 29 | @apply bg-marp-brand; |
| 30 | } |
| 31 | button:focus { |
| 32 | @apply outline-none; |
| 33 | } |
| 34 | button:focus, |
| 35 | button:hover:active { |
| 36 | @apply bg-marp-dark; |
| 37 | } |
| 38 | button :global(.scroll-to-top-icon) { |
| 39 | height: auto; |
| 40 | left: 52%; |
| 41 | position: absolute; |
| 42 | top: 52%; |
| 43 | width: 35%; |
| 44 | } |
| 45 | `}</style> |
| 46 | </div> |
| 47 | ) |
| 48 | } |
| 49 |