37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
|
import { Mail, Phone } from "lucide-react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
export default function TabsLogin({ loginMethod, handelTabs }) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex gap-2 bg-white/5 p-1 rounded-xl">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => {
|
||
|
|
handelTabs("email");
|
||
|
|
}}
|
||
|
|
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
|
||
|
|
loginMethod === "email" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Mail className="w-4 h-4" />
|
||
|
|
{t("emailMethod")}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => {
|
||
|
|
handelTabs("phone");
|
||
|
|
}}
|
||
|
|
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
|
||
|
|
loginMethod === "phone" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Phone className="w-4 h-4" />
|
||
|
|
{t("phoneMethod")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|