From ab2ede79b821bc5bd98271763f08e0db040bdeb8 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 12 Feb 2025 13:02:21 +0700
Subject: [PATCH] feat: enhance Signin page layout and add Input component

---
 frontend/app/signin/page.tsx     | 21 +++++++++++++++++++--
 frontend/components/ui/input.tsx | 22 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/ui/input.tsx

diff --git a/frontend/app/signin/page.tsx b/frontend/app/signin/page.tsx
index 718aa00..53ca80c 100644
--- a/frontend/app/signin/page.tsx
+++ b/frontend/app/signin/page.tsx
@@ -1,3 +1,5 @@
+import { Input } from "@/components/ui/input";
+
 export default function Signin() {
   return (
     <div>
@@ -5,8 +7,23 @@ export default function Signin() {
         <div className=" bg-red-200"></div>
         <div className="bg-green-200 flex justify-center items-center">
           {/* login box */}
-          <div className="flex w-[600px] h-[600px] bg-yellow-200 ">
-            <h1 className="text-3xl">Login</h1>
+          <div className="w-[560px] h-[600px] bg-yellow-200">
+            <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>
diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/frontend/components/ui/input.tsx
@@ -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 }