Merge commit '4e91c2acdf7300f4342b83ea290487c4ef664df4' as 'sample-front-end'

2025-11-28 01:31:35 +09:00
parent 1b6dddacc8 4e91c2acdf
commit 4c6af7115e
16 changed files with 1477 additions and 0 deletions
@@ -0,0 +1,32 @@
+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;