46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* PlayerBarGlass — Glassmorphism container (KŌDŌ v3)
|
||
|
|
* backdrop-blur + oklch tokens + gradient overlay
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface PlayerBarGlassProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
isHovered: boolean;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PlayerBarGlass({
|
||
|
|
children,
|
||
|
|
isHovered,
|
||
|
|
className,
|
||
|
|
}: PlayerBarGlassProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'relative w-full rounded-2xl overflow-hidden',
|
||
|
|
'backdrop-blur-2xl',
|
||
|
|
'bg-[oklch(0.08_0.01_265/0.85)]',
|
||
|
|
'border border-white/10',
|
||
|
|
'transition-all duration-300 ease-out',
|
||
|
|
'shadow-2xl player-bar-entrance',
|
||
|
|
isHovered && 'shadow-player-hover border-primary/30',
|
||
|
|
!isHovered && 'shadow-xl',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
{/* Ambient glow — KŌDŌ gradient on hover */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'absolute inset-0 pointer-events-none -z-10',
|
||
|
|
'bg-gradient-to-r from-[var(--chart-1)]/5 via-primary/5 to-[var(--chart-2)]/5',
|
||
|
|
'opacity-0 transition-opacity duration-400 ease-out',
|
||
|
|
isHovered && 'opacity-100',
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|