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;