Add frontend, backend and CLI

2026-09-22 13:39:35 +00:00 · 2022-11-17 17:54:35 -05:00
parent 8d00c5cdb7
commit bea0ff6e05
276 changed files with 50230 additions and 72 deletions
--- a/frontend/components/basic/buttons/Button.js
+++ b/frontend/components/basic/buttons/Button.js
@@ -0,0 +1,111 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+var classNames = require("classnames");
+
+export default function Button({
+	text,
+	onButtonPressed,
+	link,
+	loading,
+	color,
+	size,
+	icon,
+	active = true,
+	iconDisabled,
+	textDisabled
+}) {
+	let styleButton = classNames(
+		"group m-auto md:m-0 inline-block rounded-md duration-200",
+
+		// Setting background colors and hover modes
+		color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
+		color == "mineshaft" && !active && "bg-mineshaft",
+		(color == "primary" || !color) && active && "bg-primary hover:opacity-80",
+		(color == "primary" || !color) && !active && "bg-primary",
+		color == "red" && "bg-red",
+		
+		// Changing the opacity when active vs when not
+		active ? "opacity-100 cursor-pointer" : "opacity-40",
+
+		// Setting the button sizes
+		size == "md" && "h-10 w-full px-2 md:px-4",
+		size == "lg" && "h-12 w-full px-2 md:px-8",
+		!size && "md:py-1 px-3 md:px-8",
+		size == "icon-md" && "h-10 w-10 flex items-center justify-center",
+		size == "icon-sm" && "h-9 w-9 flex items-center justify-center",
+	);
+
+	let styleMainDiv = classNames(
+		"relative font-medium flex items-center",
+
+		// Setting the text color for the text and icon
+		color == "mineshaft" && "text-gray-400",
+		color != "mineshaft" && color != "red" && "text-black",
+		color == "red" && "text-gray-200",
+		active && color != "red" ? "group-hover:text-black" : "",
+
+		size == "icon" && "flex items-center justify-center",
+	);
+
+	let textStyle = classNames(
+		"relative duration-200",
+
+		// Show the loading sign if the loading indicator is on
+		loading == true ? "opacity-0" : "opacity-100",
+		size == "md" && "text-sm",
+		size == "lg" && "text-lg"
+	);
+
+	const button = (
+		<button 
+			disabled={!active}
+			onClick={onButtonPressed}
+			className={styleButton}
+		>
+			<div className={styleMainDiv}>
+				<div
+					className={`${
+						loading == true ? "opacity-100" : "opacity-0"
+					} absolute flex items-center px-2 duration-200`}
+				>
+					<Image
+						src="/images/loading/loadingblack.gif"
+						height={25}
+						width={42}
+						alt="loading animation"
+						className={`rounded-xl`}
+					></Image>
+				</div>
+				{icon && 
+					<FontAwesomeIcon
+						icon={icon}
+						className={`flex my-auto font-extrabold ${size == "icon-sm" ? "text-sm" : "text-md"} ${(text || textDisabled) && "mr-2"}`}
+					/>
+				}
+				{iconDisabled && 
+					<FontAwesomeIcon
+						icon={iconDisabled}
+						className={`flex my-auto font-extrabold ${size == "icon-sm" ? "text-sm" : "text-md"} ${(text || textDisabled) && "mr-2"}`}
+					/>
+				}
+				{(text || textDisabled) &&
+					<p
+						className={textStyle}
+					>
+						{active ? text : textDisabled}
+					</p>
+				}
+			</div>
+		</button>
+	);
+
+	if (link) {
+		return <Link href={link}>{button}</Link>;
+	}
+
+	return button;
+}