Ceratic/mystuff_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui2

Browse Source
This commit is contained in:
Lars Behrends
2026-05-23 00:54:01 +02:00
parent 83617f75e4
commit d61472f069
15 changed files with 281 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MediaTable.tsx
+24 -24
View File
@@ -41,14 +41,14 @@ const categoryConfig: Record<MediaCategory, {
bgColor: string;
icon: React.ElementType | null;
}> = {
'Anime': { label: 'ANIME', color: 'text-purple-300', bgColor: 'bg-purple-500/30', icon: null },
'Movies': { label: 'MOVIE', color: 'text-blue-300', bgColor: 'bg-blue-500/30', icon: Film },
'TV Series': { label: 'SERIES', color: 'text-green-300', bgColor: 'bg-green-500/30', icon: Tv },
'Music': { label: 'MUSIC', color: 'text-pink-300', bgColor: 'bg-pink-500/30', icon: Music },
'Books': { label: 'BOOK', color: 'text-yellow-300', bgColor: 'bg-yellow-500/30', icon: BookOpen },
'Games': { label: 'GAME', color: 'text-indigo-300', bgColor: 'bg-indigo-500/30', icon: Gamepad2 },
'Consoles': { label: 'CONSOLE', color: 'text-orange-300', bgColor: 'bg-orange-500/30', icon: Monitor },
'Adult': { label: 'ADULT', color: 'text-rose-300', bgColor: 'bg-rose-500/30', icon: Eye },
'Anime': { label: 'ANIME', color: 'text-purple-400', bgColor: 'bg-purple-500/20', icon: null },
'Movies': { label: 'MOVIE', color: 'text-blue-400', bgColor: 'bg-blue-500/20', icon: Film },
'TV Series': { label: 'SERIES', color: 'text-green-400', bgColor: 'bg-green-500/20', icon: Tv },
'Music': { label: 'MUSIC', color: 'text-pink-400', bgColor: 'bg-pink-500/20', icon: Music },
'Books': { label: 'BOOK', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20', icon: BookOpen },
'Games': { label: 'GAME', color: 'text-indigo-400', bgColor: 'bg-indigo-500/20', icon: Gamepad2 },
'Consoles': { label: 'CONSOLE', color: 'text-orange-400', bgColor: 'bg-orange-500/20', icon: Monitor },
'Adult': { label: 'ADULT', color: 'text-rose-400', bgColor: 'bg-rose-500/20', icon: Eye },
};
export default function MediaTable({
@@ -104,7 +104,7 @@ export default function MediaTable({
const SortIcon = ({ field }: { field: SortField }) => {
if (sortField !== field) {
return <ArrowUpDown size={14} className="text-gray-600 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />;
return <ArrowUpDown size={14} className="text-muted-foreground/40 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />;
}
return sortDirection === 'asc'
? <ArrowUp size={14} className="text-[#e8466c] ml-1" />
@@ -119,9 +119,9 @@ export default function MediaTable({
return (
<Table className="w-full">
<TableHeader>
<TableRow className="border-b border-white/[0.03] hover:bg-transparent">
<TableRow className="border-b border-border/20 hover:bg-transparent">
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[45%]"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[45%]"
onClick={() => handleSort('title')}
>
<div className="flex items-center">
@@ -129,7 +129,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[80px]"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[80px]"
onClick={() => handleSort('category')}
>
<div className="flex items-center">
@@ -137,7 +137,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[18%]"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[18%]"
onClick={() => handleSort('genre')}
>
<div className="flex items-center">
@@ -145,7 +145,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[70px] text-center"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[70px] text-center"
onClick={() => handleSort('rating')}
>
<div className="flex items-center justify-center">
@@ -153,7 +153,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[60px] text-center"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[60px] text-center"
onClick={() => handleSort('year')}
>
<div className="flex items-center justify-center">
@@ -161,7 +161,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[60px] text-right"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[60px] text-right"
onClick={() => handleSort('plays')}
>
<div className="flex items-center justify-end">
@@ -180,13 +180,13 @@ export default function MediaTable({
return (
<TableRow
key={media.id}
className="border-b border-white/[0.02] hover:bg-white/[0.02] transition-colors cursor-pointer group"
className="border-b border-border/20 hover:bg-muted/30 transition-colors cursor-pointer group"
onClick={() => onMediaClick(media)}
>
{/* Title Cell with Poster */}
<TableCell className="py-2">
<div className="flex items-center gap-3">
<div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-[#1a1d26]">
<div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-muted">
<img
src={media.poster}
alt={media.title}
@@ -195,7 +195,7 @@ export default function MediaTable({
/>
</div>
<div className="min-w-0">
<div className="text-sm font-medium text-gray-200 truncate group-hover:text-[#e8466c] transition-colors">
<div className="text-sm font-medium text-foreground truncate group-hover:text-[#e8466c] transition-colors">
{media.title}
</div>
</div>
@@ -216,7 +216,7 @@ export default function MediaTable({
{/* Genre */}
<TableCell>
<span className="text-sm text-gray-500 truncate block">
<span className="text-sm text-muted-foreground truncate block">
{media.genres?.join(', ') || '-'}
</span>
</TableCell>
@@ -225,7 +225,7 @@ export default function MediaTable({
<TableCell className="text-center">
<div className="flex items-center justify-center gap-1">
<Star size={12} className="text-[#e8466c] fill-[#e8466c]" />
<span className="text-sm font-medium text-gray-300">
<span className="text-sm font-medium text-foreground/80">
{media.rating?.toFixed(1) || '-'}
</span>
</div>
@@ -233,12 +233,12 @@ export default function MediaTable({
{/* Year */}
<TableCell className="text-center">
<span className="text-sm text-gray-400">{media.year}</span>
<span className="text-sm text-muted-foreground/80">{media.year}</span>
</TableCell>
{/* Plays */}
<TableCell className="text-right">
<span className="text-sm text-gray-400">{media.playCount || 0}</span>
<span className="text-sm text-muted-foreground/80">{media.playCount || 0}</span>
</TableCell>
{/* Favorite */}
@@ -249,7 +249,7 @@ export default function MediaTable({
"p-1 rounded transition-colors",
isFavorite
? "text-[#e8466c]"
: "text-gray-600 hover:text-gray-500"
: "text-muted-foreground/40 hover:text-muted-foreground/60"
)}
>
<Heart size={14} className={cn(isFavorite && "fill-current")} />