99 lines
1.9 KiB
TypeScript
99 lines
1.9 KiB
TypeScript
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;
|
|
disabled: boolean;
|
|
color?: string;
|
|
kind?: "primary" | "secondary" | "destructive";
|
|
type?: string;
|
|
onClick?: any;
|
|
}
|
|
|
|
const buttonColors = {
|
|
primary: colors.mediumBlue,
|
|
secondary: colors.darkMediumGray,
|
|
destructive: colors.brightRed,
|
|
};
|
|
|
|
const buttonHighlightColors = {
|
|
primary: colors.darkBlue,
|
|
secondary: colors.highlightGray,
|
|
destructive: colors.mediumRed,
|
|
};
|
|
|
|
export const InternalButton: FC<InternalButtonProps> = ({
|
|
text,
|
|
color,
|
|
kind,
|
|
disabled,
|
|
type = "button",
|
|
onClick,
|
|
}) => (
|
|
// @ts-expect-error - don't pass empty href
|
|
<MUIButton
|
|
variant="contained"
|
|
disableElevation
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
type={type}
|
|
sx={{
|
|
fontFamily: "Poppins, sans-serif",
|
|
fontWeight: 700,
|
|
borderRadius: 2,
|
|
backgroundColor: color ?? buttonColors[kind ?? "secondary"],
|
|
padding: "6px 30px",
|
|
margin: 0,
|
|
whiteSpace: "nowrap",
|
|
textTransform: "none",
|
|
"&:hover": {
|
|
backgroundColor: buttonHighlightColors[kind ?? "secondary"],
|
|
},
|
|
}}
|
|
>
|
|
{text}
|
|
</MUIButton>
|
|
);
|
|
|
|
interface ButtonProps {
|
|
text: string;
|
|
disabled?: boolean;
|
|
color?: string;
|
|
kind?: "primary" | "secondary" | "destructive";
|
|
type?: string;
|
|
href?: string;
|
|
onClick?: any;
|
|
}
|
|
|
|
export const Button: FC<ButtonProps> = ({
|
|
text,
|
|
disabled = false,
|
|
color,
|
|
type,
|
|
kind,
|
|
href,
|
|
onClick,
|
|
}) =>
|
|
href ? (
|
|
<Link href={href} passHref>
|
|
<InternalButton
|
|
text={text}
|
|
disabled={disabled}
|
|
color={color}
|
|
kind={kind}
|
|
type={type}
|
|
onClick={onClick}
|
|
/>
|
|
</Link>
|
|
) : (
|
|
<InternalButton
|
|
text={text}
|
|
disabled={disabled}
|
|
color={color}
|
|
kind={kind}
|
|
type={type}
|
|
onClick={onClick}
|
|
/>
|
|
);
|