added start rating with partial selection and accessibility

amit1884 · amit1884 · commit 6696594fffdc · 2025-11-26T20:23:05.000+05:30
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import Metronome from './pages/MetroNome/Metronome'
 import OtpInput from './pages/OTPInput/OtpInput'
 import Pagination from './pages/Pagination'
 import ProgressBar from './pages/ProgressBar/ProgressBar'
+import StarRating from './pages/StarRating'
 const options=[
   {
     id:1,name:'Amit'
@@ -41,6 +42,7 @@ function App() {
     <>
       <div>
        <CustomCheckbox options={options}/>
+       <StarRating/>
        </div>
     </>
   )
diff --git a/src/pages/StarRating/index.tsx b/src/pages/StarRating/index.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+const styles = {
+  container: {
+    display: 'inline-flex',
+    fontSize: '32px',
+    cursor: 'pointer',
+    outline: 'none',
+  },
+  starWrapper: {
+    position: 'relative',
+    color: '#ddd',
+  },
+  starOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    overflow: 'hidden',
+    color: '#ffc107',
+    pointerEvents: 'none',
+    width: '0%',
+    transition: 'width 0.2s' 
+  }
+};
+
+const StarRating = ({ max = 5, initialValue = 0, onChange }) => {
+  const [rating, setRating] = useState(initialValue);
+  const [hover, setHover] = useState(null);
+    console.log(rating,hover)
+  const displayValue = hover !== null ? hover : rating;
+
+  const handleMouseMove = (e, index) => {
+    const { left, width } = e.currentTarget.getBoundingClientRect();
+    const percent = (e.clientX - left) / width;
+    
+    const newValue = index + (percent < 0.5 ? 0.5 : 1);
+    setHover(newValue);
+  };
+
+  const handleClick = () => {
+    const newValue = hover === rating ? 0 : hover;
+    
+    setRating(newValue);
+    if (onChange) onChange(newValue);
+  };
+
+  const handleKeyDown = (e) => {
+    let newValue = rating;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+      newValue = Math.min(max, rating + 0.5);
+      e.preventDefault();
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      newValue = Math.max(0, rating - 0.5);
+      e.preventDefault();
+    }
+    
+    if (newValue !== rating) {
+        setRating(newValue);
+        if (onChange) onChange(newValue);
+    }
+  };
+
+  return (
+    <div 
+      style={styles.container}
+      role="slider"
+      tabIndex={0}
+      aria-valuemin={0} 
+      aria-valuemax={max} 
+      aria-valuenow={rating}
+      aria-label="Star Rating"
+      onKeyDown={handleKeyDown}
+      onMouseLeave={() => setHover(null)}
+    >
+      {[...Array(max)].map((_, i) => {
+        let width = '0%';
+        if (displayValue > i) {
+             const val = displayValue - i; 
+             width = val >= 1 ? '100%' : `${val * 100}%`;
+        }
+
+        return (
+          <span 
+            key={i} 
+            style={styles.starWrapper}
+            onMouseMove={(e) => handleMouseMove(e, i)}
+            onClick={handleClick}
+          >
+            &#9733; 
+            <span style={{ ...styles.starOverlay, width }}>
+              &#9733; 
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default StarRating;
