add a Slider

src/components/CenterTopData/CenterMenu/index.jsx

@@ -11,7 +11,9 @@ export default function CenterMenu() {
 	return (
 		<div className={`${cls.centerMenu} flex`}>
 			{menuList.map((menu) => (
-				<div className={cls.menuItem}>{menu[0]}</div>
+				<div key={menu[0]} className={cls.menuItem}>
+					{menu[0]}
+				</div>
 			))}
 		</div>
 	);

src/components/Slider/index.jsx

@@ -0,0 +1,17 @@
+import './slider.css';
+import { useState } from 'react';
+
+const Slider = (props) => {
+	const [v, setV] = useState(100);
+	const handleInput = (e) => {
+		setV(e.target.value);
+		props.handleSlide(e.target.value);
+	};
+	return (
+		<div id="slider" className="slider">
+			<input type="range" value={v} onInput={handleInput} />
+		</div>
+	);
+};
+
+export default Slider;

src/components/Slider/slider.css

@@ -0,0 +1,28 @@
+.slider {
+    height: 5vh;
+    width: 20vw;
+    border-radius: 88px;
+    box-shadow: 0 0 68px 8px rgba(0, 0, 0, .3);
+    padding: 32px;
+    display: grid;
+    place-items: center;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    opacity: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
+}
+
+.slider input {
+    width: 100%;
+    transform: translateY(-7px);
+    color: #0b58ff;
+    background: #fcc;
+}
+
+.slider.show {
+    opacity: 1;
+    bottom: 64px;
+}