X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FSlider.js;fp=resources%2Fjs%2Fcomponents%2Fcommon%2FSlider.js;h=634c15c6722fd859206eef6cd13d9c2c65e1d655;hb=167f986f468014e00d82fa2df8193f6be8dca19d;hp=0000000000000000000000000000000000000000;hpb=c7eaba38c74b617fbd03da196e4131e662311cc9;p=alttp.git

diff --git a/resources/js/components/common/Slider.js b/resources/js/components/common/Slider.js
new file mode 100644
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;