-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #208 from melnikga/feat/Implement-Login-and-Signup…
…-pages-on-landing-page Implement Login and Signup pages on landing page
- Loading branch information
Showing
10 changed files
with
1,074 additions
and
15 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { | ||
| label?: string; | ||
| error?: string; | ||
| rightElement?: React.ReactNode; | ||
| } | ||
|
|
||
| export const Input = React.forwardRef<HTMLInputElement, InputProps>( | ||
| ({ label, error, rightElement, className = '', ...props }, ref) => { | ||
| return ( | ||
| <div className="w-full"> | ||
| {label && ( | ||
| <label className="block text-sm font-medium mb-1"> | ||
| {label} | ||
| </label> | ||
| )} | ||
| <div className="relative"> | ||
| <input | ||
| ref={ref} | ||
| className={`w-full pl-6 pr-[30px] py-4 rounded-lg border border-[#5D5D5D] placeholder:text-[#797979] placeholder:text-[16px] leading-[21.86px] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent ${ | ||
| error ? 'border-red-500' : '' | ||
| } ${className}`} | ||
| {...props} | ||
| /> | ||
| {rightElement && ( | ||
| <div className="absolute inset-y-0 right-0 flex items-center pr-3"> | ||
| {rightElement} | ||
| </div> | ||
| )} | ||
| </div> | ||
| {error && <p className="mt-1 text-sm text-red-500">{error}</p>} | ||
| </div> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| Input.displayName = 'Input'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as SelectPrimitive from "@radix-ui/react-select" | ||
| import { Check, ChevronDown, ChevronUp } from "lucide-react" | ||
|
|
||
| import { cn } from "../../lib/utils" | ||
|
|
||
| const Select = SelectPrimitive.Root | ||
|
|
||
| const SelectGroup = SelectPrimitive.Group | ||
|
|
||
| const SelectValue = SelectPrimitive.Value | ||
|
|
||
| const SelectTrigger = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| "flex w-full items-center justify-between whitespace-nowrap rounded-lg border border-[#5D5D5D] bg-transparent px-4 py-3 text-base font-[400] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent [&>span]:line-clamp-1 disabled:cursor-not-allowed disabled:opacity-50 bg-white data-[placeholder]:text-[#797979]", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <SelectPrimitive.Icon asChild> | ||
| <ChevronDown className="h-4 w-4 opacity-50" /> | ||
| </SelectPrimitive.Icon> | ||
| </SelectPrimitive.Trigger> | ||
| )) | ||
| SelectTrigger.displayName = SelectPrimitive.Trigger.displayName | ||
|
|
||
| const SelectScrollUpButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollUpButton | ||
| ref={ref} | ||
| className={cn( | ||
| "flex cursor-default items-center justify-center py-1", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <ChevronUp className="h-4 w-4" /> | ||
| </SelectPrimitive.ScrollUpButton> | ||
| )) | ||
| SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName | ||
|
|
||
| const SelectScrollDownButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollDownButton | ||
| ref={ref} | ||
| className={cn( | ||
| "flex cursor-default items-center justify-center py-1", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <ChevronDown className="h-4 w-4" /> | ||
| </SelectPrimitive.ScrollDownButton> | ||
| )) | ||
| SelectScrollDownButton.displayName = | ||
| SelectPrimitive.ScrollDownButton.displayName | ||
|
|
||
| const SelectContent = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> | ||
| >(({ className, children, position = "popper", ...props }, ref) => ( | ||
| <SelectPrimitive.Portal> | ||
| <SelectPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-white", | ||
| position === "popper" && | ||
| "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", | ||
| className | ||
| )} | ||
| position={position} | ||
| {...props} | ||
| > | ||
| <SelectScrollUpButton /> | ||
| <SelectPrimitive.Viewport | ||
| className={cn( | ||
| "", | ||
| position === "popper" && | ||
| "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" | ||
| )} | ||
| > | ||
| {children} | ||
| </SelectPrimitive.Viewport> | ||
| <SelectScrollDownButton /> | ||
| </SelectPrimitive.Content> | ||
| </SelectPrimitive.Portal> | ||
| )) | ||
| SelectContent.displayName = SelectPrimitive.Content.displayName | ||
|
|
||
| const SelectLabel = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Label>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Label | ||
| ref={ref} | ||
| className={cn("px-2 py-1.5 text-sm font-semibold", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SelectLabel.displayName = SelectPrimitive.Label.displayName | ||
|
|
||
| const SelectItem = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Item>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Item | ||
| ref={ref} | ||
| className={cn( | ||
| "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-[#F0EFFC] focus:text-[#6E62E5] transition-none", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center"> | ||
| <SelectPrimitive.ItemIndicator> | ||
| <Check className="h-4 w-4" /> | ||
| </SelectPrimitive.ItemIndicator> | ||
| </span> | ||
| <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> | ||
| </SelectPrimitive.Item> | ||
| )) | ||
| SelectItem.displayName = SelectPrimitive.Item.displayName | ||
|
|
||
| const SelectSeparator = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Separator>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Separator | ||
| ref={ref} | ||
| className={cn("-mx-1 my-1 h-px bg-muted", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SelectSeparator.displayName = SelectPrimitive.Separator.displayName | ||
|
|
||
| export { | ||
| Select, | ||
| SelectGroup, | ||
| SelectValue, | ||
| SelectTrigger, | ||
| SelectContent, | ||
| SelectLabel, | ||
| SelectItem, | ||
| SelectSeparator, | ||
| SelectScrollUpButton, | ||
| SelectScrollDownButton, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,4 +27,5 @@ body { | |
| } | ||
| *{ | ||
| @apply transition-colors duration-200 | ||
| } | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { type ClassValue, clsx } from 'clsx'; | ||
| import { twMerge } from 'tailwind-merge'; | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState } from 'react'; | ||
| import Button from '../components/Button/Button'; | ||
| import { Input } from '../components/Input/Input'; | ||
|
|
||
| export default function LoginPage() { | ||
| const [showPassword, setShowPassword] = useState(false); | ||
|
|
||
| return ( | ||
| <div className="min-h-screen flex items-center justify-center bg-[#f5f5f5] text-[#1f1f1f] px-4"> | ||
| <div className="max-w-md w-full space-y-8"> | ||
| <div className="text-center"> | ||
| <h1 className="text-[40px] font-bold">Sign in</h1> | ||
| <p className="mt-2 text-[22px] font-[300] text-gray-600"> | ||
| Hey, Enter your details to login to your account | ||
| </p> | ||
| </div> | ||
|
|
||
| <form className="mt-8 space-y-6"> | ||
| <Input | ||
| type="text" | ||
| placeholder="Enter Email / Phone No" | ||
| /> | ||
|
|
||
| <Input | ||
| type={showPassword ? 'text' : 'password'} | ||
| placeholder="Passcode" | ||
| rightElement={ | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowPassword(!showPassword)} | ||
| className="" | ||
| > | ||
| {showPassword? 'Hide' : 'Show'} | ||
| </button> | ||
| } | ||
| /> | ||
| <div className="text-xs font-[500]"> | ||
| <span className="text-[#797979]">Don't have an account yet? </span> | ||
| <a href="/signup" className="text-[#000000]"> | ||
| Register now! | ||
| </a> | ||
| </div> | ||
|
|
||
| <Button classname='w-full !text-lg !font-[600]'> | ||
| Sign in | ||
| </Button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.