Koha9
a745adc1ab
32f6ed7 feat: Implement internationalization and rename project git-subtree-dir: sample-front-end git-subtree-split: 32f6ed743b43e001e6d1170cc370521f6b4173a2
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Playlist } from '../types';
|
|
import { Disc3, Clock } from 'lucide-react';
|
|
import { useLanguage } from '../LanguageContext';
|
|
|
|
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 truncate flex-1 mr-2 group-hover:text-white transition-colors">
|
|
{playlist.title}
|
|
</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;
|