Merge pull request #7 from ariflogs/dev

Main <- dev (Login component)

Author: ariflogs

app/page.tsx

@@ -1,9 +1,24 @@
 import React from "react";
-import { Button, H1, H2, H3, H4, H5, H6, Input, Textarea, Accordion, BasicCard, ProductCard, Avatar } from "@/components";
+import {
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Input,
+  Textarea,
+  Accordion,
+  BasicCard,
+  ProductCard,
+  Avatar,
+} from "@/components";
+import { Login } from "@/components/Login";
 
 export default function page() {
   return (
-    <div className="container max-w-6xl mx-auto">
+    <div className="container max-w-6xl mx-auto mb-96">
       <H1>Welcome to RetroUI</H1>
 
       <div className="space-y-8 mt-12">
@@ -46,6 +61,11 @@ export default function page() {
           <div className="h-4"></div>
           <ProductCard />
         </div>
+
+        <div>
+          <H3>Login</H3>
+          <Login />
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { H2 } from "../Typography";
+import { Input } from "../Form";
+import { Button } from "../Buttons";
+import Link from "next/link";
+
+export function Login() {
+  return (
+    <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 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" />
+        </div>
+        <div className="flex flex-col items-center justify-center">
+          <label htmlFor="password" className="w-11/12">
+            Password
+          </label>
+          <Input id="password" type="password" placeholder="password" />
+        </div>
+        <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>
+  );
+}

components/Login/index.ts

@@ -0,0 +1 @@
+export * from "./Login";