Koha9
4e91c2acdf
git-subtree-dir: sample-front-end git-subtree-split: 0881bf1c045118585100360b2c47594cd94b89f1
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Playlist } from '../types';
|
|
import { Disc3, Clock } from 'lucide-react';
|
|
|
|
interface PlaylistCardProps {
|
|
playlist: Playlist;
|
|
}
|
|
|
|
const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
|
|
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="Track Count">
|
|
<Disc3 size={12} className="mr-1.5 opacity-70" />
|
|
{playlist.trackCount}
|
|
</span>
|
|
<span className="flex items-center" title="Last Updated">
|
|
<Clock size={12} className="mr-1.5 opacity-70" />
|
|
{new Date(playlist.lastUpdated).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlaylistCard; |