add simple guessing game browser source

[alttp.git] / resources / js / components / common / Slider.js

diff --git a/resources/js/components/common/Slider.js b/resources/js/components/common/Slider.js
new file mode 100644 (file)
index 0000000..634c15c
--- /dev/null
+++ b/resources/js/components/common/Slider.js
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Slider = ({ children, duration, vertical }) => {
+       const [index, setIndex] = React.useState(0);
+
+       React.useEffect(() => {
+               const interval = setInterval(() => {
+                       setIndex(i => (i + 1) % React.Children.count(children));
+               }, duration);
+               return () => {
+                       clearInterval(interval);
+               };
+       }, [React.Children.count(children), duration]);
+
+       return <div className={`slider-container ${vertical ? 'vertical' : 'horizontal'}`}>
+               <div className="slider-slides" style={{
+                       transform: vertical ? `translateY(${-index * 100}%)` : `translateX(${-index * 100}%)`
+               }}>
+                       {children}
+               </div>
+       </div>;
+};
+
+Slider.propTypes = {
+       children: PropTypes.node,
+       duration: PropTypes.number,
+       vertical: PropTypes.bool,
+};
+
+Slider.defaultProps = {
+       duration: 2500,
+};
+
+const Slide = ({ children }) => {
+       return <div className="slider-slide">
+               {children}
+       </div>;
+};
+
+Slide.propTypes = {
+       children: PropTypes.node,
+};
+
+Slider.Slide = Slide;
+
+export default Slider;