frontend/app/components/TrayButton.js

import { Button } from "@mantine/core";

const DEFAULT_COLORS =
  "bg-indigo-700 text-indigo-100 hover:text-indigo-50 hover:bg-indigo-600";
const DEFAULT_ICON_COLORS = "text-indigo-300 group-hover:text-indigo-200";

const RED_COLORS =
  "bg-rose-700 text-rose-100 hover:text-rose-50 hover:bg-rose-600";
const RED_ICON_COLORS = "text-rose-300 group-hover:text-rose-200";

export const TrayButton = ({ Icon, red = false, children, ...other }) => (
  <Button
    size="md"
    radius="xl"
    className={`group transition-colors duration-300 ${
      red ? RED_COLORS : DEFAULT_COLORS
    }`}
    leftSection={
      <Icon
        size={20}
        stroke={2}
        className={`${
          red ? RED_ICON_COLORS : DEFAULT_ICON_COLORS
        } transition-colors duration-300`}
      />
    }
    {...other}
  >
    {children}
  </Button>
);