mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
kuekhaoyangandClaude Opus 4.6
df137c97f3
- Upgrade CSS variables with proper glass transparency, fixed gradient backgrounds, cubic-bezier(0.2, 0.8, 0.2, 1) fluid transitions, and enhanced shadow/border values matching the Liquid Glass touchstone - Add full backdrop-filter: blur(25px) saturate(180%) to glass-card, glass-input, glass-popover, and glass-backdrop CSS classes - Add lensing inner-glow hover effects and toast-in animation - Update all UI components (Button, Card, Input, Badge, Switch, SegmentedControl, ConfirmDialog, ModalBackdrop, ModalHeader, BackToTop, Navbar) for strict Liquid Glass compliance - Enforce rounded-2xl / rounded-full consistency across all components - Bump version to 4.6.0, update @vercel/analytics to ^2.0.1 Co-Authored-By: Claude Opus 4.6 <[email protected]>
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'ghost';
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
|
|
variant = 'primary',
|
|
children,
|
|
className = '',
|
|
...props
|
|
}, ref) => {
|
|
const baseStyles = `
|
|
inline-flex items-center justify-center
|
|
px-4 py-2.5 md:px-6 md:py-3
|
|
font-semibold text-sm md:text-base
|
|
rounded-[var(--radius-2xl)]
|
|
transition-all duration-200
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
disabled:transform-none disabled:filter-none disabled:shadow-none
|
|
min-h-[44px] touch-manipulation cursor-pointer
|
|
`;
|
|
|
|
const variants = {
|
|
primary: `
|
|
bg-[var(--accent-color)]
|
|
text-white
|
|
border-none
|
|
shadow-[var(--shadow-sm)]
|
|
hover:translate-y-[-2px]
|
|
hover:brightness-110
|
|
hover:shadow-[0_4px_8px_var(--shadow-color)]
|
|
active:translate-y-0 active:scale-[0.98]
|
|
active:brightness-95
|
|
`,
|
|
secondary: `
|
|
bg-[var(--glass-bg)]
|
|
backdrop-blur-[25px] saturate-[180%]
|
|
[-webkit-backdrop-filter:blur(25px)_saturate(180%)]
|
|
border border-[var(--glass-border)]
|
|
text-[var(--text-color)]
|
|
shadow-[var(--shadow-sm)]
|
|
hover:shadow-[0_4px_8px_var(--shadow-color)]
|
|
active:scale-[0.98]
|
|
`,
|
|
ghost: `
|
|
bg-transparent
|
|
text-[var(--text-color)]
|
|
hover:bg-[var(--glass-border)]
|
|
active:scale-[0.98]
|
|
`,
|
|
};
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={`${baseStyles} ${variants[variant]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
Button.displayName = 'Button';
|