feat: make users provide a rating

BREAKING CHANGE: This commit breaks compatibility with the previous version

src/components/TweetButton.test.tsx

@@ -4,5 +4,5 @@ import { test } from "@jest/globals";
 import { TweetButton } from "./TweetButton";
 
 test("tweet button renders correctly", () => {
-  render(<TweetButton />);
+  render(<TweetButton rating={35} />);
 });

src/components/TweetButton.tsx

@@ -3,20 +3,53 @@ import "../index.css";
 
 interface TweetButtonPropsType {
   number?: number;
+  rating: number;
+}
+
+function generateStarIcons(rating: number) {
+  const megaStars = `⭐⭐⭐⭐⭐ x ${Math.round(rating / 5)}`;
+  let stars = "";
+
+  for (let i = 0; i < rating; i++) {
+    stars += "⭐";
+  }
+  return rating > 10 ? megaStars : stars;
 }
 
 export function TweetButton(props: TweetButtonPropsType) {
   const tweetURL = `https://twitter.com/intent/tweet?text=Thank+you,+%40oluwatobiss.+Your+book+helped+me+create,+test,+and+publish+${
     props.number && props.number > 1 ? props.number : "an"
   }+NPM+${
     props.number && props.number > 1 ? "packages" : "package"
-  }.%0A%0ACreating%20NPM%20Package:%20React%20TypeScript%20Guide%0A%0Ahttps%3A%2F%2Famzn.to/3R1M0XU`;
+  }.%0A%0ABook's+Rating:+${props.rating}-star+rating!+${generateStarIcons(
+    props.rating
+  )}+%0A%0ACreating%20NPM%20Package:%20React%20TypeScript%20Guide%0A%0Ahttps%3A%2F%2Famzn.to/3R1M0XU`;
 
-  return (
+  return props.rating ? (
     <section className="tweet-btn-container">
       <a className="tweet-button" href={tweetURL} target="_blank">
         Send a thank you tweet
       </a>
     </section>
+  ) : (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        marginTop: "30px",
+      }}
+    >
+      <p
+        style={{
+          backgroundColor: "#DC3545",
+          color: "#fff",
+          width: "35%",
+          borderRadius: "5px",
+          padding: "15px 20px",
+        }}
+      >
+        ⓘ Error: Props 'rating' is missing in 'TweetButtonPropsType'.
+      </p>
+    </div>
   );
 }