Create/detail updates

packages/ui/components/Button.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { FC } from "react";
+import Link from "next/link";
+import { Button as MUIButton } from "@mui/material";
+import { colors } from "../styles/theme";
+
+interface InternalButtonProps {
+  text: string;
+  color?: string;
+  kind?: "primary" | "secondary" | "destructive";
+  type?: string;
+  onClick?: any;
+}
+
+const buttonColors = {
+  primary: colors.mediumBlue,
+  secondary: colors.darkMediumGray,
+  destructive: colors.brightRed,
+};
+
+export const InternalButton: FC<InternalButtonProps> = ({
+  text,
+  color,
+  kind,
+  type = "button",
+  onClick,
+}) => (
+  <MUIButton
+    variant="contained"
+    disableElevation
+    onClick={onClick}
+    type={type}
+    href=""
+    sx={{
+      fontFamily: "Poppins, sans-serif",
+      fontWeight: 700,
+      borderRadius: 2,
+      backgroundColor: color ?? buttonColors[kind ?? "secondary"],
+      padding: "6px 30px",
+      margin: 0,
+      whiteSpace: "nowrap",
+      textTransform: "none",
+    }}
+  >
+    {text}
+  </MUIButton>
+);
+
+interface ButtonProps {
+  text: string;
+  color?: string;
+  kind?: "primary" | "secondary" | "destructive";
+  type?: string;
+  href?: string;
+  onClick?: any;
+}
+
+export const Button: FC<ButtonProps> = ({
+  text,
+  color,
+  type,
+  kind,
+  href,
+  onClick,
+}) =>
+  href ? (
+    <Link href={href} passHref>
+      <InternalButton
+        text={text}
+        color={color}
+        kind={kind}
+        type={type}
+        onClick={onClick}
+      />
+    </Link>
+  ) : (
+    <InternalButton
+      text={text}
+      color={color}
+      kind={kind}
+      type={type}
+      onClick={onClick}
+    />
+  );