input,button,login

Author: rituisboy

app/page.tsx

@@ -18,7 +18,7 @@ import { Login } from "@/components/Login";
 
 export default function page() {
   return (
-    <div className="container max-w-6xl mx-auto mb-10">
+    <div className="container max-w-6xl mx-auto mb-96">
       <H1>Welcome to RetroUI</H1>
 
       <div className="space-y-8 mt-12">

components/Buttons/Button.tsx

@@ -1,20 +1,26 @@
-import React, { ReactNode } from 'react';
+import React, { ButtonHTMLAttributes } from "react";
 
-interface ButtonProps {
-  children: ReactNode;
-  size?: 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  className?: string;
 }
 
-export function Button({ children, size = 'md' }: ButtonProps) {
+export function Button({
+  children,
+  size = "md",
+  className = "",
+  ...props
+}: ButtonProps) {
   const sizeClasses = {
-    sm: 'px-4 py-1 text-sm',
-    md: 'px-6 py-2 text-md',
-    lg: 'px-8 py-3 text-lg',
+    sm: "px-4 py-1 text-sm",
+    md: "px-6 py-2 text-base",
+    lg: "px-8 py-3 text-lg",
   };
 
   return (
     <button
-      className={`font-head bg-primary-400 border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]}`}
+      className={`font-head bg-primary-400 text-primary-foreground border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${className}`}
+      {...props}
     >
       {children}
     </button>

components/Form/Input.tsx

@@ -1,11 +1,15 @@
-import React from "react";
+import React, { InputHTMLAttributes } from "react";
 
-export function Input({
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
   type = "text",
   placeholder = "Enter text",
   className = "",
   ...props
-}) {
+}) => {
   return (
     <input
       type={type}
@@ -14,4 +18,4 @@ export function Input({
       {...props}
     />
   );
-}
+};

components/Login/Login.tsx

@@ -1,59 +1,38 @@
-"use client";
-import React, { ReactElement, useState } from "react";
+import React from "react";
+import { H2 } from "../Typography";
+import { Input } from "../Form";
+import { Button } from "../Buttons";
+import Link from "next/link";
 
-export function Login(): ReactElement {
-  const [customClass, setCustomClass] = useState(false);
-
-  const handleClick = () => {
-    setCustomClass(true);
-    setTimeout(() => {
-      setCustomClass(false);
-    }, 150);
-  };
+export function Login() {
   return (
-    <div className="max-w-80 bg-rose-400  border-2 border-black shadow-md ">
-      <div className="font-head text-3xl text-center px-4 py-2 my-2 ">
-        Login
+    <div className="max-w-80 p-4  border-2 border-black shadow-md space-y-3">
+      <div className="text-center">
+        <H2>Login</H2>
       </div>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-        className="flex flex-col gap-8"
-      >
+      <form className="flex flex-col gap-5 ">
         <div className="flex flex-col items-center justify-center">
           <label htmlFor="email" className="w-11/12">
             Email
           </label>
-          <input
-            id="email"
-            type="email"
-            placeholder="Email"
-            className="px-4 py-2 w-11/12 font-body  border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs "
-          />
+          <Input id="email" type="email" placeholder="email" />
         </div>
         <div className="flex flex-col items-center justify-center">
-          <label htmlFor="email" className="w-11/12">
+          <label htmlFor="password" className="w-11/12">
             Password
           </label>
-          <input
-            type="password"
-            placeholder="Password"
-            className={`px-4 py-2 w-11/12 font-body  border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs`}
-          />
+          <Input id="password" type="password" placeholder="password" />
         </div>
-        <div className="flex flex-col items-center justify-center py-4">
-          <button
-            onClick={handleClick}
-            className={`px-6 py-2 w-1/2 text-sm font-head bg-primary-400  rounded-full border-2 border-black shadow-md  transition-all ${
-              customClass ? "bg-primary-500 scale-95 shadow-xs" : ""
-            }`}
-          >
-            submit
-          </button>
-          <p className="px-4 py-2 ">
-            Don&apos;t have an account? <a href="/">sign-in</a>
-          </p>
+        <div className="flex flex-col items-center justify-center py-4 gap-1">
+          <Button className="rounded-full active:shadow-none active:scale-95">
+            Submit
+          </Button>
+          <div className="px-4 py-2 space-x-1">
+            <span>Don&apos;t have an account?</span>
+            <Link href="/" className="text-primary-700 hover:underline">
+              sign-in
+            </Link>
+          </div>
         </div>
       </form>
     </div>