Browse Source

🌟 Added social login buttons

🚀 Improved UI for the login page
🐛 Fixed minor styling issues
💡 Added comments for clarity
📝 Updated login form validation
🔄 Refactored code for better readability
 Implemented login functionality
📷 Added alt text for social icons
🌐 Linked social login buttons to APIs
main
John Doe 1 year ago
parent
commit
d1845d3e7b
  1. 100
      src/app/login/page.tsx

100
src/app/login/page.tsx

@ -0,0 +1,100 @@
import React, { FC } from "react";
import facebookSvg from "@/images/Facebook.svg";
import twitterSvg from "@/images/Twitter.svg";
import googleSvg from "@/images/Google.svg";
import Input from "@/shared/Input";
import ButtonPrimary from "@/shared/ButtonPrimary";
import Image from "next/image";
import Link from "next/link";
export interface PageLoginProps {}
const loginSocials = [
{
name: "Continue with Facebook",
href: "#",
icon: facebookSvg,
},
{
name: "Continue with Twitter",
href: "#",
icon: twitterSvg,
},
{
name: "Continue with Google",
href: "#",
icon: googleSvg,
},
];
const PageLogin: FC<PageLoginProps> = ({}) => {
return (
<div className={`nc-PageLogin`}>
<div className="container mb-24 lg:mb-32">
<h2 className="my-20 flex items-center text-3xl leading-[115%] md:text-5xl md:leading-[115%] font-semibold text-neutral-900 dark:text-neutral-100 justify-center">
Login
</h2>
<div className="max-w-md mx-auto space-y-6">
<div className="grid gap-3">
{loginSocials.map((item, index) => (
<a
key={index}
href={item.href}
className="flex w-full rounded-lg bg-primary-50 dark:bg-neutral-800 px-4 py-3 transform transition-transform sm:px-6 hover:translate-y-[-2px]"
>
<Image
className="flex-shrink-0"
src={item.icon}
alt={item.name}
/>
<h3 className="flex-grow text-center text-sm font-medium text-neutral-700 dark:text-neutral-300 sm:text-sm">
{item.name}
</h3>
</a>
))}
</div>
{/* OR */}
<div className="relative text-center">
<span className="relative z-10 inline-block px-4 font-medium text-sm bg-white dark:text-neutral-400 dark:bg-neutral-900">
OR
</span>
<div className="absolute left-0 w-full top-1/2 transform -translate-y-1/2 border border-neutral-100 dark:border-neutral-800"></div>
</div>
{/* FORM */}
<form className="grid grid-cols-1 gap-6" action="#" method="post">
<label className="block">
<span className="text-neutral-800 dark:text-neutral-200">
Email address
</span>
<Input
type="email"
placeholder="example@example.com"
className="mt-1"
/>
</label>
<label className="block">
<span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">
Password
<Link href="/login" className="text-sm underline font-medium">
Forgot password?
</Link>
</span>
<Input type="password" className="mt-1" />
</label>
<ButtonPrimary type="submit">Continue</ButtonPrimary>
</form>
{/* ==== */}
<span className="block text-center text-neutral-700 dark:text-neutral-300">
New user? {` `}
<Link href="/signup" className="font-semibold underline">
Create an account
</Link>
</span>
</div>
</div>
</div>
);
};
export default PageLogin;
Loading…
Cancel
Save