feat: login page and input

src/components/ui/Input.module.scss

@@ -0,0 +1 @@
+@reference "../../index.scss";

src/components/ui/Input.tsx

@@ -0,0 +1,17 @@
+import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
+
+const input = tv({
+  base: "rounded-md border border-gray-300 p-2",
+});
+
+interface InputProps {
+  isPassword?: boolean;
+  placeholder?: string;
+}
+
+const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "" }: InputProps) => {
+  return <input type={isPassword ? "password" : "text"} class={input()} placeholder={placeholder} />;
+};
+
+export default Input;

src/pages/login.module.scss

@@ -0,0 +1,5 @@
+@reference "../index.scss";
+
+.login_container {
+  @apply flex flex-row justify-center gap-2 align-middle;
+}

src/pages/login.tsx

@@ -0,0 +1,15 @@
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import { FunctionComponent } from "preact";
+import classes from "./login.module.scss";
+const LoginPage: FunctionComponent = () => {
+  return (
+    <div class={classes.login_container}>
+      <Input placeholder="Login" />
+      <Input isPassword placeholder="Password" />
+      <Button onClick={() => {}}>Login</Button>
+    </div>
+  );
+};
+
+export default LoginPage;