Mike Swanson
fa15b03180
Synced files: - Quote wizard frontend (all components, hooks, types, config) - API updates (config, models, routers, schemas, services) - Client work (bg-builders, gurushow) - Scripts (BGB Lesley termination, CIPP, Datto, migration) - Temp files (Bardach contacts, VWP investigation, misc) - Credentials and session logs - Email service, PHP API, session logs Machine: ACG-M-L5090 Timestamp: 2026-03-10 19:11:00 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { forwardRef, type ButtonHTMLAttributes } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart'> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
className,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
isLoading = false,
|
|
disabled,
|
|
children,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const baseStyles =
|
|
'inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed';
|
|
|
|
const variants = {
|
|
primary:
|
|
'bg-gradient-accent text-white hover:brightness-110 focus-visible:ring-[#fe7400] shadow-sm hover:shadow-md active:brightness-95',
|
|
secondary:
|
|
'bg-[#333d49] text-white hover:bg-[#252d36] focus-visible:ring-[#333d49] shadow-sm hover:shadow-md',
|
|
outline:
|
|
'border-2 border-gray-200 text-[#333d49] hover:border-[#333d49] hover:bg-gray-50 focus-visible:ring-[#333d49]',
|
|
ghost:
|
|
'text-[#333d49] hover:bg-gray-100/80 focus-visible:ring-[#333d49]',
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'px-4 py-2 text-sm',
|
|
md: 'px-6 py-2.5 text-sm',
|
|
lg: 'px-8 py-3.5 text-base',
|
|
};
|
|
|
|
return (
|
|
<motion.button
|
|
ref={ref}
|
|
whileHover={{ scale: disabled || isLoading ? 1 : 1.015 }}
|
|
whileTap={{ scale: disabled || isLoading ? 1 : 0.985 }}
|
|
className={cn(baseStyles, variants[variant], sizes[size], className)}
|
|
disabled={disabled || isLoading}
|
|
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
|
|
{...props}
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<svg
|
|
className="animate-spin -ml-1 mr-2 h-4 w-4"
|
|
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"
|
|
/>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
Processing...
|
|
</>
|
|
) : (
|
|
children
|
|
)}
|
|
</motion.button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = 'Button';
|
|
|
|
export { Button };
|