Most simple components created

lib/component/button/Button.tsx

@@ -0,0 +1,57 @@
+import type { ButtonProps } from "$/types/Button";
+import clsx from "clsx";
+
+
+export default function Button(props: ButtonProps){
+	const {
+		className,
+		rounding = "lg",
+		shape = "rectangle",
+		size = "md",
+		variant = "standard",
+		disabled,
+		...buttonProps
+	} = props;
+
+
+	return (
+		<button
+			{...buttonProps}
+			disabled={disabled}
+			className={clsx(
+				className,
+				//Rounding
+				{
+					"rounded-none": rounding === "none",
+					"rounded-sm": rounding === "sm",
+					"rounded": rounding === "md",
+					"rounded-lg": rounding === "lg",
+					"rounded-full": rounding === "full"
+				},
+				//Size and shape
+				{
+					"p-0": size === "xs" && shape === "square",
+					"p-1": size === "sm" && shape === "square",
+					"p-2": size === "md" && shape === "square",
+					"p-3": size === "lg" && shape === "square",
+					"p-4": size === "xl" && shape === "square",
+
+					"px-1 py-0": size === "xs" && shape === "rectangle",
+					"px-2 py-1": size === "sm" && shape === "rectangle",
+					"px-4 py-2": size === "md" && shape === "rectangle",
+					"px-6 py-3": size === "lg" && shape === "rectangle",
+					"px-8 py-4": size === "xl" && shape === "rectangle",
+				},
+				//Variant
+				{
+					"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
+					"border-none": variant === "ghost" || variant === "icon"
+				},
+				//Disabled
+				{
+					"cursor-pointer": !disabled
+				}
+			)}
+		/>
+	);
+}