mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

style: add danger button variant and fix contact form error state
Some checks failed
Build & Deploy KLZ Cables / 🔍 Prepare Environment (push) Successful in 6s
Details
Build & Deploy KLZ Cables / 🧪 Quality Assurance (push) Successful in 2m3s
Details
Build & Deploy KLZ Cables / 🏗️ Build Gatekeeper (push) Successful in 33s
Details
Build & Deploy KLZ Cables / 🏗️ Build App (push) Successful in 3m59s
Details
Build & Deploy KLZ Cables / 🚀 Deploy (push) Failing after 9s
Details
Build & Deploy KLZ Cables / ⚡ PageSpeed (push) Has been skipped
Details
Build & Deploy KLZ Cables / 🔔 Notifications (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-05 14:08:06 +01:00
parent 9678181927
commit 50347d049d
3 changed files with 140 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/ui/Button.tsx
View File

@@ -3,24 +3,42 @@ import Link from 'next/link';
import { cn } from './utils';
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'accent' | 'saturated' | 'outline' | 'ghost' | 'white';
variant?:
| 'primary'
| 'secondary'
| 'accent'
| 'saturated'
| 'outline'
| 'ghost'
| 'white'
| 'danger';
size?: 'sm' | 'md' | 'lg' | 'xl';
href?: string;
className?: string;
children?: React.ReactNode;
}
export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
export function Button({
className,
variant = 'primary',
size = 'md',
href,
...props
}: ButtonProps) {
const baseStyles =
'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
const variants = {
primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
outline: 'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
outline:
'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
ghost: 'text-primary hover:shadow-lg',
white: 'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
white:
'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
danger: 'bg-danger text-white shadow-md hover:shadow-danger/30 hover:shadow-2xl',
};
const sizes = {
@@ -40,20 +58,25 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
outline: 'bg-primary',
ghost: 'bg-primary-light/10',
white: 'bg-primary-light',
danger: 'bg-danger-dark',
};
const content = (
<>
<span className={cn(
"relative z-10 flex items-center justify-center gap-2 transition-colors duration-500",
variant === 'white' ? "group-hover/btn:text-primary-dark" : ""
)}>
<span
className={cn(
'relative z-10 flex items-center justify-center gap-2 transition-colors duration-500',
variant === 'white' ? 'group-hover/btn:text-primary-dark' : '',
)}
>
{props.children}
</span>
<span className={cn(
"absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out",
overlayColors[variant]
)} />
<span
className={cn(
'absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out',
overlayColors[variant],
)}
/>
</>
);