4b57b46bac
- Header, Sidebar, Toast, Dropdown, EmptyState component refinements - Auth flow: LoginPage, RegisterPage, AuthInput, AuthLayout improvements - Player bar: glass effect, progress, track info, controls enhancements - Dashboard, Discover, Search pages updates - PlaylistCard, TrackCard component improvements - Auth store and API interceptors hardening - i18n: updated en/es/fr locale files - CSS additions in index.css - Package.json and vite config updates Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
/**
|
|
* PlayerBarGlass — Glassmorphism container (KŌDŌ v3)
|
|
* backdrop-blur + semantic tokens + gradient overlay + noise texture
|
|
* Spotify/Discord-grade polish with accent gradient, top-edge highlight, and noise depth
|
|
*/
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface PlayerBarGlassProps {
|
|
children: React.ReactNode;
|
|
isHovered: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function PlayerBarGlass({
|
|
children,
|
|
isHovered,
|
|
className,
|
|
}: PlayerBarGlassProps) {
|
|
return (
|
|
<div
|
|
data-testid="player-bar"
|
|
className={cn(
|
|
'relative w-full rounded-xl overflow-hidden noise',
|
|
'backdrop-blur-[20px]',
|
|
'bg-[var(--sumi-glass-bg)]',
|
|
'border border-[var(--sumi-glass-border)]',
|
|
'transition-[box-shadow,border-color,transform] duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)]',
|
|
'shadow-[var(--sumi-shadow-xl)] player-bar-entrance',
|
|
isHovered && 'shadow-[var(--sumi-shadow-xl)] border-[var(--sumi-border-accent)]',
|
|
!isHovered && 'shadow-[var(--sumi-shadow-lg)]',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
|
|
{/* Top-edge highlight line — 1px gradient shimmer */}
|
|
<div
|
|
className="absolute top-0 left-0 right-0 h-px pointer-events-none z-10"
|
|
style={{
|
|
background:
|
|
'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.05) 70%, transparent 100%)',
|
|
}}
|
|
/>
|
|
|
|
{/* Accent gradient overlay — subtle radial glow from bottom-center */}
|
|
<div
|
|
className={cn(
|
|
'absolute inset-0 pointer-events-none z-0',
|
|
'transition-opacity duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
|
|
isHovered ? 'opacity-100' : 'opacity-40',
|
|
)}
|
|
style={{
|
|
background:
|
|
'radial-gradient(ellipse 80% 60% at 50% 100%, var(--sumi-accent-subtle) 0%, transparent 70%)',
|
|
}}
|
|
/>
|
|
|
|
{/* Subtle accent tint on hover — SUMI */}
|
|
<div
|
|
className={cn(
|
|
'absolute inset-0 pointer-events-none z-0',
|
|
'bg-[var(--sumi-accent-subtle)]',
|
|
'opacity-0 transition-opacity duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
|
|
isHovered && 'opacity-100',
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|