forked from 77media/video-flow
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface GlassIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
icon: LucideIcon;
|
|
tooltip?: string;
|
|
variant?: 'primary' | 'secondary' | 'danger';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const variantStyles = {
|
|
primary: 'bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/20',
|
|
secondary: 'bg-white/10 hover:bg-white/20 border-white/20',
|
|
danger: 'bg-red-500/10 hover:bg-red-500/20 border-red-500/20',
|
|
};
|
|
|
|
const sizeStyles = {
|
|
sm: 'p-2',
|
|
md: 'p-3',
|
|
lg: 'p-4',
|
|
};
|
|
|
|
const iconSizes = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-5 h-5',
|
|
lg: 'w-6 h-6',
|
|
};
|
|
|
|
export function GlassIconButton({
|
|
icon: Icon,
|
|
tooltip,
|
|
variant = 'secondary',
|
|
size = 'md',
|
|
className,
|
|
...props
|
|
}: GlassIconButtonProps) {
|
|
return (
|
|
<motion.button
|
|
className={cn(
|
|
'relative rounded-full backdrop-blur-md transition-colors shadow-lg border',
|
|
variantStyles[variant],
|
|
sizeStyles[size],
|
|
className
|
|
)}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
rotateX: 10,
|
|
translateZ: 10
|
|
}}
|
|
whileTap={{ scale: 0.95 }}
|
|
style={{
|
|
transformStyle: 'preserve-3d',
|
|
perspective: '1000px'
|
|
}}
|
|
{...props}
|
|
>
|
|
<Icon className={cn('text-white', iconSizes[size])} />
|
|
{tooltip && (
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs
|
|
bg-black/80 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity
|
|
pointer-events-none whitespace-nowrap">
|
|
{tooltip}
|
|
</div>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
}
|