| 5 | export const sideButtonContainer = <div className="side-buttons"></div>; |
| 6 | |
| 7 | export default function SideButtons({ |
| 8 | text, |
| 9 | icon, |
| 10 | onclick, |
| 11 | backgroundColor, |
| 12 | textColor, |
| 13 | }) { |
| 14 | const $button = ( |
| 15 | <button |
| 16 | className="side-button" |
| 17 | onclick={onclick} |
| 18 | style={{ backgroundColor, color: textColor }} |
| 19 | > |
| 20 | <spam className={`icon ${icon}`}></spam> |
| 21 | <span>{text}</span> |
| 22 | </button> |
| 23 | ); |
| 24 | |
| 25 | press($button, (element) => { |
| 26 | if (document.body.classList.contains("no-animation")) return; |
| 27 | animate( |
| 28 | element, |
| 29 | { scale: 0.95 }, |
| 30 | { type: "spring", stiffness: 450, damping: 20 }, |
| 31 | ); |
| 32 | return () => { |
| 33 | animate( |
| 34 | element, |
| 35 | { scale: 1 }, |
| 36 | { type: "spring", stiffness: 450, damping: 20 }, |
| 37 | ); |
| 38 | }; |
| 39 | }); |
| 40 | |
| 41 | return { |
| 42 | show() { |
| 43 | sideButtonContainer.append($button); |
| 44 | }, |
| 45 | hide() { |
| 46 | $button.remove(); |
| 47 | }, |
| 48 | }; |
| 49 | } |