ForFarmTeam/ForFarm
1
0
Fork 0
mirror of https://github.com/ForFarmTeam/ForFarm.git synced 2025-12-19 14:04:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance Signin page layout and add Input component

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-02-12 13:02:21 +07:00
parent 7b30bb695e
commit ab2ede79b8
2 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/app/signin/page.tsx
View File

@ -1,3 +1,5 @@
import { Input } from "@/components/ui/input";
export default function Signin() { export default function Signin() {
return ( return (
<div> <div>
@ -5,8 +7,23 @@ export default function Signin() {
<div className=" bg-red-200"></div> <div className=" bg-red-200"></div>
<div className="bg-green-200 flex justify-center items-center"> <div className="bg-green-200 flex justify-center items-center">
{/* login box */} {/* login box */}
<div className="flex w-[600px] h-[600px] bg-yellow-200 "> <div className="w-[560px] h-[600px] bg-yellow-200">
<h1 className="text-3xl">Login</h1> <div className="flex flex-col gap-5 justify-center items-center">
<h1 className="text-4xl mt-5 font-semibold">Login</h1>
<div className="flex whitespace-nowrap gap-x-2">
<span>Don&apos;t have an account?</span>
<span className="text-green-600">Sign up</span>
</div>
</div>
<div className="flex flex-col mt-10">
<h1 className="whitespace-nowrap flex items-start">
EMAIL <span className="text-red-500">*</span>
</h1>
<div className="flex flex-col items-center">
<Input className="w-2/3" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

22
frontend/components/ui/input.tsx Normal file
View File

@ -0,0 +1,22 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }