37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Playlist } from '../types';
|
|
import { Disc3, Clock } from 'lucide-react';
|
|
import { useLanguage } from '../LanguageContext';
|
|
import OverflowMarquee from './OverflowMarquee';
|
|
|
|
interface PlaylistCardProps {
|
|
playlist: Playlist;
|
|
}
|
|
|
|
const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
|
|
const { t } = useLanguage();
|
|
return (
|
|
<div className="group flex flex-col w-full p-2.5 bg-gray-800/60 rounded-md border border-gray-700/50 hover:bg-gray-700 hover:border-plex-orange/50 transition-all duration-200 cursor-pointer shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-sm font-medium text-gray-200 flex-1 mr-2 group-hover:text-white transition-colors min-w-0">
|
|
<OverflowMarquee>
|
|
{playlist.title}
|
|
</OverflowMarquee>
|
|
</h4>
|
|
</div>
|
|
|
|
<div className="flex items-center mt-1.5 space-x-4 text-xs text-gray-500 group-hover:text-gray-400">
|
|
<span className="flex items-center" title={t('playlist.trackCount')}>
|
|
<Disc3 size={12} className="mr-1.5 opacity-70" />
|
|
{playlist.trackCount}
|
|
</span>
|
|
<span className="flex items-center" title={t('playlist.lastUpdated')}>
|
|
<Clock size={12} className="mr-1.5 opacity-70" />
|
|
{new Date(playlist.lastUpdated).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlaylistCard; |