82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useTranslation } from "@/i18n/navigation";
|
||
import Footer from "@/app/components/Footer";
|
||
|
||
export default function AIPage() {
|
||
const { t } = useTranslation("ai");
|
||
const [query, setQuery] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const exampleQueries = [
|
||
"我预算每月800刀，想亚洲热带，有稳定网，适合freelance写作，推荐城市+理由",
|
||
"帮我写下一站介绍文案",
|
||
"生成3月清迈行程计划",
|
||
];
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!query.trim()) return;
|
||
setLoading(true);
|
||
setTimeout(() => setLoading(false), 1500);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
||
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-12 sm:py-16">
|
||
<div className="text-center mb-10">
|
||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">
|
||
{t("title")}
|
||
</h1>
|
||
<p className="mt-2 text-gray-500 dark:text-gray-400">
|
||
{t("subtitle")}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-6">
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<textarea
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder={t("placeholder")}
|
||
rows={4}
|
||
className="w-full rounded-xl border border-gray-200 dark:border-gray-700 px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 resize-none focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f]"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={loading || !query.trim()}
|
||
className="w-full py-3 rounded-xl bg-[#ff4d4f] text-white font-medium hover:bg-[#ff3333] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{loading ? t("thinking") : t("ask")}
|
||
</button>
|
||
</form>
|
||
|
||
<div className="mt-6 pt-6 border-t border-gray-100 dark:border-gray-800">
|
||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||
{t("examples")}
|
||
</p>
|
||
<div className="space-y-2">
|
||
{exampleQueries.map((q, i) => (
|
||
<button
|
||
key={i}
|
||
type="button"
|
||
onClick={() => setQuery(q)}
|
||
className="block w-full text-left px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-800 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
||
>
|
||
{q}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="mt-6 text-center text-xs text-gray-400 dark:text-gray-500">
|
||
{t("comingSoon")}
|
||
</p>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|