add star rating play

src/plays/star-rating/Readme.md

@@ -0,0 +1,23 @@
+# Star rating
+
+A star rating component is commonly used to give feedback and reviews on e-commerce websites or app stores.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: frankiefab100
+- Github Link: https://github.com/frankiefab100
+- Blog: https://frankiefab.hashnode.dev/how-to-build-a-star-rating-using-usestate-hook
+
+
+## What will you learn?
+
+- Functional Component.
+- useState Hook.
+- Event handling.
+- State management
+

src/plays/star-rating/StarRating.js

@@ -0,0 +1,81 @@
+import PlayHeader from "common/playlists/PlayHeader";
+import { useState } from "react";
+import { FaStar } from "react-icons/fa";
+import "./styles.css";
+
+// WARNING: Do not change the entry componenet name
+function StarRating(props) {
+  // Your Code Start below.
+
+  const [rating, setRating] = useState(null);
+  const [hoverFill, setHoverFill] = useState(null);
+  const [isHover, setIsHover] = useState(null);
+
+  const getReviewLabel = (rating) => {
+    switch (rating) {
+      case 1:
+        return `Very bad ${String.fromCodePoint("0x1F922")}`;
+      case 2:
+        return `Bad ${String.fromCodePoint("0x1F97A")}`;
+      case 3:
+        return `Okay ${String.fromCodePoint("0x1F60C")}`;
+      case 4:
+        return `Good ${String.fromCodePoint("0x1F60A")}`;
+      case 5:
+        return `Excellent ${String.fromCodePoint("0x1F929")}`;
+
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+
+          <div className="star-wrapper">
+            <h2 className="review-label">
+              {getReviewLabel(isHover > 0 ? isHover : rating)}
+            </h2>
+
+            <div className="star">
+              {[...Array(5)].map((_, index) => {
+                const ratingValue = index + 1;
+
+                return (
+                  <button
+                    key={index}
+                    onMouseOver={() => setIsHover(ratingValue)}
+                    onMouseOut={() => setIsHover(null)}
+                    onMouseEnter={() => setHoverFill(ratingValue)}
+                    onMouseLeave={() => setHoverFill(null)}
+                    onClick={() => setRating(ratingValue)}
+                  >
+                    <FaStar
+                      className="FaStar"
+                      size={80}
+                      style={{
+                        color:
+                          ratingValue <= (hoverFill || rating)
+                            ? "#ffe101"
+                            : "#ccc",
+                      }}
+                      onChange={(ratingValue) => setRating(ratingValue)}
+                      value={ratingValue}
+                    />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default StarRating;

src/plays/star-rating/styles.css

@@ -0,0 +1,29 @@
+/* enter stlyes here */
+.star-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.review-label {
+  position: absolute;
+  margin-top: -100px;
+}
+
+.star > button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+
+@media screen and (max-width: 450px) {
+  .FaStar {
+    width: 40px;
+  }
+}