cleanup

2026-06-06 03:34:40 +00:00 · 2023-09-12 07:06:04 +10:00
parent ae9515532e
commit ee1738fb21
9 changed files with 76 additions and 38 deletions
@@ -7,7 +7,7 @@
    <title>Vite + React + TS</title>
  </head>
  <body>
-    <div id="ExtensionPopup"></div>
+    <div id="ExtensionPopup" class="dark."></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
@@ -1,4 +1,5 @@
 import './App.css'
+import Slider from './components/Slider'
 import Switch from './components/Switch'

 function App() {
@@ -7,8 +8,11 @@ function App() {
  }

  return (
-    <div className="flex flex-col gap-2 bg-zinc-800">
+    <div className="flex flex-col gap-2 dark:bg-zinc-800">
      <Switch onChange={switchChange} />
+      <div className="w-48">
+        <Slider onValueChange={(value) => console.log(value)} />
+      </div>
      <Switch onChange={switchChange} />
      <Switch onChange={switchChange} />
      <Switch onChange={switchChange} />
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+interface Slider {
+  onValueChange: (value: number) => void;
+}
+
+const Slider: React.FC<Slider> = ({ onValueChange }) => {
+  const [sliderValue, setSliderValue] = useState(0);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value, 10);
+    setSliderValue(value);
+  };
+
+  const handleMouseUp = () => {
+    onValueChange(sliderValue);
+  };
+
+  return (
+    <div className="relative">
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value={sliderValue}
+        onChange={handleInputChange}
+        onMouseUp={handleMouseUp}
+        className="absolute w-full h-1.5 bg-gray-300 rounded-full cursor-pointer focus:outline-none"
+      />
+    </div>
+  );
+};
+
+export default Slider;
@@ -4,6 +4,7 @@ export default {
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
+  darkMode: "class",
  theme: {
    extend: {
      colors: {