feat: form hook

src/components/ui/Button.module.scss

@@ -1,5 +1,5 @@
 @reference '../../index.scss';
 
 .button {
-  @apply rounded-4xl px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer;
+  @apply rounded-4xl px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer focus:outline-1;
 }

src/components/ui/Button.tsx

@@ -16,6 +16,7 @@ interface ButtonProps {
   color?: "primary" | "secondary" | "red";
   onClick?: () => void;
   className?: string;
+  type?: "button" | "submit";
 }
 
 const Button: FunctionComponent<ButtonProps> = ({
@@ -23,9 +24,10 @@ const Button: FunctionComponent<ButtonProps> = ({
   onClick = () => {},
   color = "primary",
   className = "",
+  type = "button",
 }) => {
   return (
-    <button type="button" class={button({ color: color, class: className })} onClick={onClick}>
+    <button type={type} class={button({ color: color, class: className })} onClick={onClick}>
       {children}
     </button>
   );

src/components/ui/Input.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/utils/class-merge";
-import { FunctionComponent, Ref } from "preact";
+import { forwardRef, HTMLProps, useEffect } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Input.module.scss";
 
@@ -20,29 +20,19 @@ const input = tv({
   },
 });
 
-interface InputProps {
-  isPassword?: boolean;
-  placeholder?: string;
+interface InputProps extends HTMLProps<HTMLInputElement> {
   textAlign?: "center" | "left";
   error?: string;
-  textRef?: Ref<HTMLInputElement> | null;
 }
 
-const Input: FunctionComponent<InputProps> = ({
-  isPassword = false,
-  placeholder = "",
-  textAlign,
-  error = "",
-  textRef = null,
-}: InputProps) => {
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { textAlign, error, type = "text", ...rest } = props;
+  useEffect(() => {
+    console.log(`error: ${error}`);
+  }, [error]);
   return (
     <div class="flex w-full flex-col items-center gap-1">
-      <input
-        type={isPassword ? "password" : "text"}
-        class={input({ "text-align": textAlign, "border-error": error !== "" })}
-        placeholder={placeholder}
-        ref={textRef}
-      />
+      <input class={input({ "text-align": textAlign, "border-error": !!error })} ref={ref} type={type} {...rest} />
       <p
         class={cn("invisible h-10 w-[80%] text-center text-[0.7rem] break-words text-red-500", {
           visible: error !== "",
@@ -52,6 +42,8 @@ const Input: FunctionComponent<InputProps> = ({
       </p>
     </div>
   );
-};
+});
+
+Input.displayName = "AHInput";
 
 export default Input;