From 2a1b89c8ac47d48bbe899aafd6c6b549eb25b330 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:06:58 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20code=20for?=
 =?UTF-8?q?=20better=20readability=20=F0=9F=9A=A7=20Fix=20minor=20styling?=
 =?UTF-8?q?=20issues=20=F0=9F=8C=9F=20Add=20new=20feature=20to=20FiveStart?=
 =?UTF-8?q?IconForRate=20component=20=F0=9F=94=A7=20Update=20dependencies?=
 =?UTF-8?q?=20and=20package=20versions=20=F0=9F=90=9B=20Fix=20a=20bug=20in?=
 =?UTF-8?q?=20FiveStartIconForRate=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FiveStartIconForRate.tsx | 47 +++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/FiveStartIconForRate.tsx

diff --git a/src/components/FiveStartIconForRate.tsx b/src/components/FiveStartIconForRate.tsx
new file mode 100644
index 0000000..e6170d7
--- /dev/null
+++ b/src/components/FiveStartIconForRate.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { StarIcon } from "@heroicons/react/24/solid";
+import React, { FC, useEffect } from "react";
+import { useState } from "react";
+
+export interface FiveStartIconForRateProps {
+  className?: string;
+  iconClass?: string;
+  defaultPoint?: number;
+}
+
+const FiveStartIconForRate: FC<FiveStartIconForRateProps> = ({
+  className = "",
+  iconClass = "w-4 h-4",
+  defaultPoint = 5,
+}) => {
+  const [point, setPoint] = useState(defaultPoint);
+  const [currentHover, setCurrentHover] = useState(0);
+
+  useEffect(() => {
+    setPoint(defaultPoint);
+  }, [defaultPoint]);
+
+  return (
+    <div
+      className={`nc-FiveStartIconForRate flex items-center text-neutral-300 ${className}`}
+      data-nc-id="FiveStartIconForRate"
+    >
+      {[1, 2, 3, 4, 5].map((item) => {
+        return (
+          <StarIcon
+            key={item}
+            className={`${
+              point >= item || currentHover >= item ? "text-yellow-500" : ""
+            } ${iconClass}`}
+            onMouseEnter={() => setCurrentHover(() => item)}
+            onMouseLeave={() => setCurrentHover(() => 0)}
+            onClick={() => setPoint(() => item)}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default FiveStartIconForRate;