feat: login page

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;