fixed owner and customer register make reuseable component and completed it

app/components/LoginComponent/Tabs.js

@@ -0,0 +1,36 @@
+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>
+    </>
+  );
+}