First Commit

2024-10-16 15:20:34 +01:00
commit 25daf1844e
30 changed files with 617 additions and 0 deletions
@@ -0,0 +1,65 @@
+import {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    DetailedHTMLProps,
+    HTMLAttributeAnchorTarget,
+    HTMLAttributes,
+} from "react";
+import { ClassNameValue, twMerge } from "tailwind-merge";
+
+export default function Button({
+    href,
+    target,
+    variant,
+    color,
+    linkProps,
+    ...props
+}: DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+> & {
+    variant?: "normal" | "ghost" | "outlined";
+    color?: "primary" | "secondary" | "accent";
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    linkProps?: DetailedHTMLProps<
+        AnchorHTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+    >;
+}) {
+    const finalClassName: string = (() => {
+        if (variant == "normal" || !variant) {
+            if (color == "primary" || !color) return "bg-blue-500 text-white";
+        } else if (variant == "outlined") {
+            if (color == "primary" || !color)
+                return (
+                    "bg-transparent outline outline-1 outline-blue-500" +
+                    " text-blue-500"
+                );
+        } else if (variant == "ghost") {
+        }
+
+        return "";
+    })();
+
+    const buttonComponent = (
+        <button
+            {...props}
+            className={twMerge(
+                "bg-blue-600 text-white text-base font-medium px-4 py-2 rounded",
+                finalClassName,
+                props.className
+            )}
+        >
+            {props.children}
+        </button>
+    );
+
+    if (href)
+        return (
+            <a {...linkProps} href={href} target={target}>
+                {buttonComponent}
+            </a>
+        );
+    return buttonComponent;
+}