feat: login page

src/app.tsx

@@ -1,13 +1,25 @@
-import { useSignal } from "@preact/signals";
+import { FunctionComponent } from "preact";
+import { ErrorBoundary, LocationProvider, Route, Router, useLocation } from "preact-iso";
 import "preact/debug";
-import classes from "./app.module.scss";
-import Button from "./components/ui/Button";
+import LoginPage from "./pages/login";
+
+const HomePage: FunctionComponent = () => {
+  const location = useLocation();
+  location.route("/login");
+  return <div>Redirecting to login...</div>;
+};
+
 export function App() {
-  const counter = useSignal(0);
   return (
     <>
-      <h1 class={classes.text}>Hello, World!</h1>
-      <Button onClick={() => counter.value++}>Count: {counter.value}</Button>
+      <LocationProvider>
+        <ErrorBoundary>
+          <Router>
+            <Route path="/" component={HomePage} />
+            <Route path="/login" component={LoginPage} />
+          </Router>
+        </ErrorBoundary>
+      </LocationProvider>
     </>
   );
 }

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;

src/pages/login.module.scss

@@ -1,5 +1,9 @@
 @reference "../index.scss";
 
 .login_container {
-  @apply flex flex-row justify-center gap-2 align-middle;
+  @apply flex min-h-screen flex-col items-center justify-center;
+}
+
+.login_card {
+  @apply flex w-[95%] min-w-[300px] flex-col justify-center gap-2 rounded-md border-gray-400 p-5 shadow-md md:w-[350px];
 }

src/pages/login.tsx

@@ -5,9 +5,11 @@ 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 class={classes.login_card}>
+        <Input placeholder="Login" textAlign="center" />
+        <Input isPassword placeholder="Password" textAlign="center" />
+        <Button onClick={() => {}}>Login</Button>
+      </div>
     </div>
   );
 };