68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { getRating, setRating } from "@/app/lib/learning";
|
|
|
|
export function RatingSection() {
|
|
const [stars, setStars] = useState(0);
|
|
const [comment, setComment] = useState("");
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const r = getRating();
|
|
if (r) {
|
|
setStars(r.stars);
|
|
setComment(r.comment);
|
|
setSubmitted(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleSubmit = () => {
|
|
setRating(stars, comment);
|
|
setSubmitted(true);
|
|
};
|
|
|
|
return (
|
|
<section className="border-t border-[var(--border)] py-12 sm:py-16">
|
|
<div className="mx-auto max-w-2xl px-4 text-center sm:px-6">
|
|
<h2 className="mb-2 text-xl font-bold sm:text-2xl">课程评价</h2>
|
|
<p className="mb-6 text-sm text-[var(--muted-foreground)]">
|
|
你的反馈对我们很重要
|
|
</p>
|
|
{submitted ? (
|
|
<p className="text-[var(--muted-foreground)]">感谢你的评价 ✓</p>
|
|
) : (
|
|
<>
|
|
<div className="mb-4 flex justify-center gap-1">
|
|
{[1, 2, 3, 4, 5].map((n) => (
|
|
<button
|
|
key={n}
|
|
type="button"
|
|
onClick={() => setStars(n)}
|
|
className="text-2xl transition hover:scale-110"
|
|
>
|
|
{n <= stars ? "⭐" : "☆"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<textarea
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
placeholder="选填：一句话评价"
|
|
className="mb-4 w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
|
|
rows={2}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
className="rounded-full bg-[var(--accent)] px-6 py-2 text-sm font-medium text-[var(--accent-foreground)] hover:opacity-90"
|
|
>
|
|
提交评价
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|