input to change number of start on real time and add shadcn input com…

…mponent

src/components/ui/input.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    (<input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Input.displayName = "Input"
+
+export { Input }

src/index.css

@@ -58,10 +58,11 @@
   }
 
   *::-webkit-scrollbar {
-    @apply w-1 bg-neutral-900
+    @apply w-1 bg-neutral-900;
   }
+
   *::-webkit-scrollbar-thumb {
-    @apply bg-accent
+    @apply bg-accent;
   }
 
   body {
@@ -71,6 +72,15 @@
   #root {
     @apply h-screen w-screen flex flex-col overflow-x-hidden;
   }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 }
 
 @layer components {

src/pages/starRating.jsx

@@ -1,39 +1,59 @@
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { FaStar } from "react-icons/fa"; // Correct import for FaStar
+import { Input } from "@/components/ui/input";
 
 function StarRating({ numOfStars = 5 }) {
   const [rating, setRating] = useState(0);
   const [hover, setHover] = useState(0);
+  const [starNums, setStarNums] = useState(numOfStars);
 
   function handleClick(getCurrentLIndex) {
-    setRating(getCurrentLIndex)
+    setRating(getCurrentLIndex);
   }
   function handleMouseEnter(getCurrentLIndex) {
-    setHover(getCurrentLIndex)
+    setHover(getCurrentLIndex);
   }
   function handleMouseLeave() {
-    setHover(rating)
+    setHover(rating);
   }
+  const handleStarNumChange = (event) => {
+    setStarNums(event.target.value);
+    console.log(starNums)
+  };
 
   return (
     <div
-      className={`container flex flex-1 items-center justify-center gap-8 my-10 w-full h-screen`}
+      className={`container flex flex-col flex-1 items-center justify-center gap-8 my-10 w-full h-screen`}
     >
-      {[...Array(numOfStars)].map((_, index) => {
-        index += 1;
+      <Input
+        type="number"
+        placeholder="number of stars"
+        className="w-72"
+        value={starNums}
+        onChange={handleStarNumChange}
+      />
 
-        return (
-          <FaStar
-            key={index}
-            className={index <= (hover || rating) ? 'active text-primary' : 'inactive text-white'}
-            onClick={() => handleClick(index)}
-            onMouseMove={() => handleMouseEnter(index)}
-            onMouseLeave={() => handleMouseLeave(index)}
-            size={40}
-          />
-        );
-      })}
+      <div className="flex justify-center items-center w-full gap-3">
+        {Array.from({length: starNums}).map((_, index) => {
+          index += 1;
+
+          return (
+            <FaStar
+              key={index}
+              className={
+                index <= (hover || rating)
+                  ? "active text-primary"
+                  : "inactive text-white"
+              }
+              onClick={() => handleClick(index)}
+              onMouseMove={() => handleMouseEnter(index)}
+              onMouseLeave={() => handleMouseLeave(index)}
+              size={40}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }
@@ -42,4 +62,4 @@ StarRating.propTypes = {
   numOfStars: PropTypes.number,
 };
 
-export default StarRating
+export default StarRating;