feat: login page

src/components/ui/Button.module.scss

@@ -1,5 +1,5 @@
 @reference '../../index.scss';
 
 .button {
-  @apply rounded-2xl border-2 border-black p-5 text-white;
+  @apply rounded-2xl border-2 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
 }

src/components/ui/Button.tsx

@@ -5,8 +5,8 @@ const button = tv({
   base: classes.button,
   variants: {
     color: {
-      primary: "bg-blue-400",
-      secondary: "bg-red-400",
+      primary: "bg-blue-400 hover:bg-blue-500",
+      secondary: "bg-red-400 hover:bg-red-500",
     },
   },
 });

src/components/ui/Input.module.scss

@@ -1 +1,5 @@
 @reference "../../index.scss";
+
+.input_field {
+  @apply rounded-md border border-gray-300 p-2;
+}

src/components/ui/Input.tsx

@@ -1,17 +1,34 @@
 import { FunctionComponent } from "preact";
 import { tv } from "tailwind-variants";
+import classes from "./Input.module.scss";
 
 const input = tv({
-  base: "rounded-md border border-gray-300 p-2",
+  base: classes.input_field,
+  variants: {
+    "text-align": {
+      center: "text-center",
+      left: "text-left",
+    },
+  },
+  defaultVariants: {
+    "text-align": "left",
+  },
 });
 
 interface InputProps {
   isPassword?: boolean;
   placeholder?: string;
+  textAlign?: "center" | "left";
 }
 
-const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "" }: InputProps) => {
-  return <input type={isPassword ? "password" : "text"} class={input()} placeholder={placeholder} />;
+const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "", textAlign }: InputProps) => {
+  return (
+    <input
+      type={isPassword ? "password" : "text"}
+      class={input({ "text-align": textAlign })}
+      placeholder={placeholder}
+    />
+  );
 };
 
 export default Input;