link-stack/apps/link/app/_components/Button.tsx

"use client";

import { FC } from "react";
import Link from "next/link";
import { Button as MUIButton } from "@mui/material";

interface ButtonProps {
  text: string;
  color: string;
  href: string;
}

export const Button: FC<ButtonProps> = ({ text, color, href }) => (
  <Link href={href} passHref>
    <MUIButton
      variant="contained"
      disableElevation
      sx={{
        fontFamily: "Poppins, sans-serif",
        fontWeight: 700,
        borderRadius: 2,
        backgroundColor: color,
        padding: "6px 30px",
        margin: "20px 0px",
        whiteSpace: "nowrap",
        textTransform: "none",
      }}
    >
      {text}
    </MUIButton>
  </Link>
);