From ae1f0f4cdf5f4e5053dfe70f8bdbbd781c1c1110 Mon Sep 17 00:00:00 2001
From: SkyWT <me@skywt.cn>
Date: Mon, 22 Jul 2024 22:55:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BD=BF=E7=94=A8=20React=20?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=BB=E9=A1=B5=E8=AF=84=E4=BB=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Rating.astro | 83 -------------------------------------
 src/components/Rating.tsx   | 49 ++++++++++++++++++++++
 src/pages/index.astro       |  4 +-
 3 files changed, 51 insertions(+), 85 deletions(-)
 delete mode 100644 src/components/Rating.astro
 create mode 100644 src/components/Rating.tsx

diff --git a/src/components/Rating.astro b/src/components/Rating.astro
deleted file mode 100644
index 8ca9b151..00000000
--- a/src/components/Rating.astro
+++ /dev/null
@@ -1,83 +0,0 @@
----
-
----
-
-<div class="mt-2">
-  <div class="align-center">
-    <span>感觉如何？</span>
-    <div class="inline-flex px-2">
-      <i id="star-1" class="star ri-star-line"></i>
-      <i id="star-2" class="star ri-star-line"></i>
-      <i id="star-3" class="star ri-star-line"></i>
-      <i id="star-4" class="star ri-star-line"></i>
-      <i id="star-5" class="star ri-star-line"></i>
-    </div>
-    <span id="submit" class="link">提交</span>
-  </div>
-  <p id="hint"></p>
-</div>
-
-<script>
-  const stars = document.querySelectorAll(".star");
-  const hint = document.querySelector("#hint") as HTMLElement;
-  const submit = document.querySelector("#submit") as HTMLElement;
-  let rate = 0;
-  let submitted = false;
-
-  stars.forEach(function (star, index) {
-    star.addEventListener("click", function () {
-      if (submitted) return false;
-      rate = index;
-      stars.forEach(function (s, i) {
-        if (i <= index) {
-          s.classList.add("ri-star-fill");
-          s.classList.add("active");
-          s.classList.remove("ri-star-line");
-        } else {
-          s.classList.remove("ri-star-fill");
-          s.classList.remove("active");
-          s.classList.add("ri-star-line");
-        }
-      });
-    });
-  });
-
-  submit.addEventListener("click", function () {
-    // stars.forEach(function (star, index) {
-    //   star.removeEventListener;
-    // });
-    submitted = true;
-    let hintText = "";
-    switch (rate) {
-      case 0:
-        hintText = "感谢你的评价。";
-        break;
-      case 1:
-        hintText = "感谢你的评价。";
-        break;
-      case 2:
-        hintText = "感谢你的评价。";
-        break;
-      case 3:
-        hintText = "谢谢你的喜欢！";
-        break;
-      case 4:
-        hintText = "谢谢你的喜欢！";
-        break;
-    }
-    submit.innerText = hintText;
-    submit.classList.remove("link");
-    hint.innerText =
-      "这个评价组件我还没写后端，所以你的评价不会被提交。你开心就好 😁";
-  });
-</script>
-
-<style class="scss">
-  .star {
-    @apply px-1 text-xl;
-  }
-
-  .active {
-    @apply text-yellow-500;
-  }
-</style>
diff --git a/src/components/Rating.tsx b/src/components/Rating.tsx
new file mode 100644
index 00000000..99fbf8db
--- /dev/null
+++ b/src/components/Rating.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react";
+
+export default function Rating() {
+  const [selected, setSelected] = useState(0);
+  const [submitted, setSubmitted] = useState(false);
+
+  const getThanks = (num: number): string => {
+    if (num >= 4) return "谢谢你的喜欢！";
+    else return "感谢你的评价。";
+  };
+
+  return (
+    <div className="mt-2">
+      <div className="align-center">
+        <span>感觉如何？</span>
+        <div className="inline-flex px-2">
+          {[1, 2, 3, 4, 5].map((i) =>
+            i <= selected ? (
+              <i
+                key={i}
+                className={`ri-star-fill px-1 text-xl text-yellow-500${submitted ? "" : " cursor-pointer"}`}
+                onClick={() => {
+                  if (!submitted) setSelected(i);
+                }}
+              />
+            ) : (
+              <i
+                key={i}
+                className={`ri-star-line px-1 text-xl${submitted ? "" : " cursor-pointer"}`}
+                onClick={() => {
+                  if (!submitted) setSelected(i);
+                }}
+              />
+            ),
+          )}
+        </div>
+        <span
+          className={submitted ? "" : "link"}
+          onClick={() => setSubmitted(true)}
+        >
+          {submitted ? getThanks(selected) : "提交"}
+        </span>
+      </div>
+      {submitted && (
+        <p>这个评价组件我还没写后端，所以你的评价不会被提交。你开心就好 😁</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c056fcd3..f64887b4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ import Layout from "@layouts/Layout.astro";
 import Menu from "@components/menu/Menu.astro";
 import Bento from "@components/bento/Bento.astro";
 import ProjectsCards from "@components/projects/ProjectsCards.astro";
-import Rating from "@components/Rating.astro";
+import Rating from "@components/Rating";
 import projects_yml from "@configs/projects.yml";
 import menu_yml from "@configs/menu.yml";
 import Navbar from "@components/Navbar.astro";
@@ -102,7 +102,7 @@ import Navbar from "@components/Navbar.astro";
           这个网站的整套程序，命名为 Daydreamer。我将其定义为一个持续开发的
           playground，之后将会尝试陆续添加各种好玩的功能。
         </p>
-        <Rating />
+        <Rating client:load />
       </div>
     </section>
   </main>