feat: tags on tasks

src/components/ui/Button.tsx

@@ -1,5 +1,4 @@
-import { FunctionComponent } from "preact";
-import { HTMLProps } from "preact/compat";
+import { forwardRef, HTMLProps } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Button.module.scss";
 const button = tv({
@@ -18,19 +17,14 @@ interface ButtonProps extends HTMLProps<HTMLButtonElement> {
   className?: string;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({
-  children,
-  onClick = () => {},
-  color = "primary",
-  className = "",
-  type = "button",
-}) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { children, onClick = () => {}, color = "primary", className = "", type = "button" } = props;
   return (
-    <button type={type} class={button({ color: color, class: className })} onClick={onClick}>
+    <button ref={ref} type={type} class={button({ color: color, class: className })} onClick={onClick}>
       {children}
     </button>
   );
-};
+});
 
 Button.displayName = "AHButton";