154 lines
6.3 KiB
TypeScript
154 lines
6.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslation } from "@/i18n/navigation";
|
|
import Footer from "@/app/components/Footer";
|
|
|
|
export default function FeedbackPage() {
|
|
const { t } = useTranslation("feedback");
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [form, setForm] = useState({
|
|
type: "suggestion" as "suggestion" | "bug",
|
|
email: "",
|
|
title: "",
|
|
content: "",
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSubmitted(true);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<main className="max-w-[640px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
|
<header className="mb-8">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
|
<span className="w-1 h-8 bg-[#ff4d4f] rounded-full" />
|
|
{t("title")}
|
|
</h1>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm sm:text-base">
|
|
{t("subtitle")}
|
|
</p>
|
|
</header>
|
|
|
|
{submitted ? (
|
|
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-8 text-center">
|
|
<span className="text-5xl mb-4 block">🙏</span>
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
|
{t("successTitle")}
|
|
</h2>
|
|
<p className="text-gray-500 dark:text-gray-400 mb-6">
|
|
{t("successDesc")}
|
|
</p>
|
|
<button
|
|
onClick={() => {
|
|
setSubmitted(false);
|
|
setForm({ type: "suggestion", email: "", title: "", content: "" });
|
|
}}
|
|
className="px-6 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
{t("submitAnother")}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-6 sm:p-8 space-y-6"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("type")} *
|
|
</label>
|
|
<div className="flex gap-3">
|
|
<label className="flex-1 flex items-center justify-center gap-2 p-3 rounded-xl border cursor-pointer transition-colors has-[:checked]:border-[#ff4d4f] has-[:checked]:bg-[#ff4d4f]/5">
|
|
<input
|
|
type="radio"
|
|
name="type"
|
|
value="suggestion"
|
|
checked={form.type === "suggestion"}
|
|
onChange={(e) =>
|
|
setForm((f) => ({ ...f, type: e.target.value as "suggestion" }))
|
|
}
|
|
className="sr-only"
|
|
/>
|
|
<span>💡</span>
|
|
<span>{t("suggestion")}</span>
|
|
</label>
|
|
<label className="flex-1 flex items-center justify-center gap-2 p-3 rounded-xl border cursor-pointer transition-colors has-[:checked]:border-[#ff4d4f] has-[:checked]:bg-[#ff4d4f]/5">
|
|
<input
|
|
type="radio"
|
|
name="type"
|
|
value="bug"
|
|
checked={form.type === "bug"}
|
|
onChange={(e) =>
|
|
setForm((f) => ({ ...f, type: e.target.value as "bug" }))
|
|
}
|
|
className="sr-only"
|
|
/>
|
|
<span>🐛</span>
|
|
<span>{t("bug")}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("email")} *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={form.email}
|
|
onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
|
|
placeholder={t("emailPlaceholder")}
|
|
className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("titleLabel")} *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={form.title}
|
|
onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
|
|
placeholder={t("titlePlaceholder")}
|
|
className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("content")} *
|
|
</label>
|
|
<textarea
|
|
required
|
|
rows={5}
|
|
value={form.content}
|
|
onChange={(e) => setForm((f) => ({ ...f, content: e.target.value }))}
|
|
placeholder={t("contentPlaceholder")}
|
|
className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f] resize-none"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-400 dark:text-gray-500">
|
|
{t("demoHint")}
|
|
</p>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full py-3.5 rounded-xl bg-[#ff4d4f] text-white font-semibold hover:bg-[#ff7a45] transition-colors"
|
|
>
|
|
{t("submit")}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|