add star rating play (reactplay#513)

* add star rating play

This fixes issue reactplay#464

* update star-rating play

* update star rating hover state

* Update styles.css

Co-authored-by: Koustov <[email protected]>
Co-authored-by: Tapas Adhikary <[email protected]>

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;
+ }
+}