7fc96d77d2
- Add photographer finance page at /meus-pagamentos with payment history table - Remove university management page and related routes - Update Finance and UserApproval pages with consistent spacing and typography - Fix Dashboard background color to match other pages (bg-gray-50) - Standardize navbar logo sizing across all pages - Change institution field in course form from dropdown to text input - Add year and semester fields for university graduation dates - Improve header spacing on all pages to pt-20 sm:pt-24 md:pt-28 lg:pt-32 - Apply font-serif styling consistently across page headers
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React from "react";
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: "primary" | "secondary" | "outline" | "ghost";
|
|
size?: "sm" | "md" | "lg" | "xl";
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
children,
|
|
variant = "primary",
|
|
size = "md",
|
|
isLoading,
|
|
className = "",
|
|
...props
|
|
}) => {
|
|
const baseStyles =
|
|
"inline-flex items-center justify-center font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
|
|
const variants = {
|
|
primary: "bg-[#492E61] text-white hover:bg-[#3a2450] focus:ring-[#492E61]",
|
|
secondary:
|
|
"bg-[#B9CF32] text-white hover:bg-[#a5bd2e] focus:ring-[#B9CF32]",
|
|
outline:
|
|
"border border-[#492E61] text-[#492E61] hover:bg-[#492E61]/5 focus:ring-[#492E61]",
|
|
ghost: "text-[#492E61] hover:bg-[#492E61]/10 hover:text-[#3a2450]",
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "text-[10px] sm:text-xs px-2 sm:px-3 py-1 sm:py-1.5 rounded-md",
|
|
md: "text-xs sm:text-sm px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 rounded-lg",
|
|
lg: "text-sm sm:text-base px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 rounded-lg",
|
|
xl: "text-base sm:text-lg px-6 sm:px-8 md:px-10 py-3 sm:py-4 rounded-xl font-semibold",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
|
disabled={isLoading || props.disabled}
|
|
{...props}
|
|
>
|
|
{isLoading ? (
|
|
<svg
|
|
className="animate-spin -ml-1 mr-2 h-4 w-4 text-current"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
) : null}
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|