From ae1f0f4cdf5f4e5053dfe70f8bdbbd781c1c1110 Mon Sep 17 00:00:00 2001
From: SkyWT
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 @@
----
-
----
-
-
-
-
感觉如何?
-
-
-
-
-
-
-
-
提交
-
-
-
-
-
-
-
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 (
+
+
+
感觉如何?
+
+ {[1, 2, 3, 4, 5].map((i) =>
+ i <= selected ? (
+ {
+ if (!submitted) setSelected(i);
+ }}
+ />
+ ) : (
+ {
+ if (!submitted) setSelected(i);
+ }}
+ />
+ ),
+ )}
+
+
setSubmitted(true)}
+ >
+ {submitted ? getThanks(selected) : "提交"}
+
+
+ {submitted && (
+
这个评价组件我还没写后端,所以你的评价不会被提交。你开心就好 😁
+ )}
+
+ );
+}
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,之后将会尝试陆续添加各种好玩的功能。
-
+