🐛 使用 React 重构主页评价组件

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

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>