41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { tabContentVariant, settingsPageVariant } from "./Variants";
|
|
import Dropdown from "./Dropdown";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const Misc = ({ id, active }) => {
|
|
const { t } = useTranslation();
|
|
|
|
const languages = [
|
|
{ id: "en-US", label: t("settings.languages.english") },
|
|
{ id: "es", label: t("settings.languages.spanish") },
|
|
{ id: "ja", label: t("settings.languages.japanese") }
|
|
];
|
|
|
|
return (
|
|
<motion.div
|
|
role="tabpanel"
|
|
id={id}
|
|
className="tab-content"
|
|
variants={tabContentVariant}
|
|
animate={active ? "active" : "inactive"}
|
|
initial="inactive"
|
|
>
|
|
<motion.div
|
|
variants={settingsPageVariant}
|
|
className="content-card flex flex-row flex-wrap justify-center w-full gap-4"
|
|
>
|
|
<div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
|
|
<div class="text-3xl">{t("settings.languages.title")}</div>
|
|
<div class="text-md">{t("settings.languages.subtitle")}</div>
|
|
<Dropdown
|
|
storageKey="i18nextLng"
|
|
options={languages}
|
|
refresh={true}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
export default Misc;
|