118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { LightButton } from "@/design-system/base/button/button";
|
|
import { Input } from "@/design-system/base/input/input";
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { POPULAR_LANGUAGES } from "./constants";
|
|
|
|
interface SearchFormProps {
|
|
defaultQueryLang?: string;
|
|
defaultDefinitionLang?: string;
|
|
}
|
|
|
|
export function SearchForm({ defaultQueryLang = "english", defaultDefinitionLang = "chinese" }: SearchFormProps) {
|
|
const t = useTranslations("dictionary");
|
|
const [queryLang, setQueryLang] = useState(defaultQueryLang);
|
|
const [definitionLang, setDefinitionLang] = useState(defaultDefinitionLang);
|
|
const router = useRouter();
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
const searchQuery = formData.get("searchQuery") as string;
|
|
|
|
if (!searchQuery?.trim()) return;
|
|
|
|
const params = new URLSearchParams({
|
|
q: searchQuery,
|
|
ql: queryLang,
|
|
dl: definitionLang,
|
|
});
|
|
|
|
router.push(`/dictionary?${params.toString()}`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* 页面标题 */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="text-gray-700 text-lg">
|
|
{t("description")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 搜索表单 */}
|
|
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2">
|
|
<Input
|
|
type="text"
|
|
name="searchQuery"
|
|
defaultValue=""
|
|
placeholder={t("searchPlaceholder")}
|
|
variant="search"
|
|
required
|
|
/>
|
|
<LightButton
|
|
type="submit"
|
|
className="px-6 py-3 whitespace-nowrap text-center sm:min-w-30"
|
|
>
|
|
{t("search")}
|
|
</LightButton>
|
|
</form>
|
|
|
|
{/* 语言设置 */}
|
|
<div className="mt-4 bg-white/20 rounded-lg p-4">
|
|
<div className="mb-3">
|
|
<span className="text-gray-800 font-semibold">{t("languageSettings")}</span>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{/* 查询语言 */}
|
|
<div>
|
|
<label className="block text-gray-700 text-sm mb-2">
|
|
{t("queryLanguage")} ({t("queryLanguageHint")})
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{POPULAR_LANGUAGES.map((lang) => (
|
|
<LightButton
|
|
key={lang.code}
|
|
type="button"
|
|
selected={queryLang === lang.code}
|
|
onClick={() => setQueryLang(lang.code)}
|
|
className="text-sm px-3 py-1"
|
|
>
|
|
{lang.nativeName}
|
|
</LightButton>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 释义语言 */}
|
|
<div>
|
|
<label className="block text-gray-700 text-sm mb-2">
|
|
{t("definitionLanguage")} ({t("definitionLanguageHint")})
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{POPULAR_LANGUAGES.map((lang) => (
|
|
<LightButton
|
|
key={lang.code}
|
|
type="button"
|
|
selected={definitionLang === lang.code}
|
|
onClick={() => setDefinitionLang(lang.code)}
|
|
className="text-sm px-3 py-1"
|
|
>
|
|
{lang.nativeName}
|
|
</LightButton>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|