angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Tooltip component and related hooks for improved UI interactions

Browse Source 
- Implemented Tooltip component using Radix UI for better accessibility and customization.
- Created TooltipProvider, TooltipTrigger, and TooltipContent for modular usage.
- Added useIsMobile hook to detect mobile devices based on screen width.
- Updated themes with new color variables for better design consistency across the application.
This commit is contained in:
angel
2025-07-03 15:34:53 +00:00
committed by GitHub
parent f25b4dcac1
commit 7b622cb1ec
44 changed files with 6021 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/FullScreenPlayer.tsx
View File

@@ -21,14 +21,7 @@ import {
FaListUl
} from "react-icons/fa6";
import { Heart } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
interface LyricLine {
time: number;
@@ -294,10 +287,9 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
{/* Overlay for better contrast */}
<div className="absolute inset-0 bg-black/50" />
<div className="relative h-full w-full flex flex-col">
{/* Header */}
<div className="flex items-center justify-between p-4 lg:p-6 shrink-0">
<h2 className="text-lg lg:text-xl font-semibold text-white"></h2>
<div className="relative h-full w-full">
{/* Floating Header */}
<div className="absolute top-0 right-0 z-50 p-4 lg:p-6">
<div className="flex items-center gap-2">
{onOpenQueue && (
<button
@@ -319,7 +311,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
</div>
{/* Main Content */}
<div className="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 pt-0 overflow-hidden min-h-0">
<div className="h-full flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 overflow-hidden">
{/* Left Side - Album Art and Controls */}
<div className="flex flex-col items-center justify-center min-h-0 flex-1 min-w-0">
{/* Album Art */}
@@ -453,7 +445,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
<div className="flex-1 min-w-0 min-h-0 flex flex-col" ref={lyricsRef}>
<div className="h-full flex flex-col">
<ScrollArea className="flex-1 min-h-0">
<div className="space-y-3 sm:space-y-4 pl-12 pr-4 py-4">
<div className="space-y-2 sm:space-y-3 pl-4 pr-4 py-4">
{lyrics.map((line, index) => (
<div
key={index}
@@ -461,7 +453,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
onClick={() => handleLyricClick(line.time)}
className={`text-sm sm:text-base lg:text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground ${
index === currentLyricIndex
? 'text-foreground font-bold text-lg sm:text-xl lg:text-2xl'
? 'text-foreground font-bold text-2xl'
: index < currentLyricIndex
? 'text-foreground/60'
: 'text-foreground/40'
@@ -470,8 +462,8 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
wordWrap: 'break-word',
overflowWrap: 'break-word',
hyphens: 'auto',
paddingBottom: '6px',
paddingLeft: '16px'
paddingBottom: '4px',
paddingLeft: '8px'
}}
title={`Click to jump to ${formatTime(line.time)}`}
>