Ver código fonte

Afficher icône play sur YouTube

Ajoute une superposition d'icône de lecture sur les miniatures YouTube dans NewsCard pour indiquer une vidéo, tout en conservant le lecteur YouTube dans le modal. Mû par les modifications précédentes: ajustement du mapping des catégories RSS et affichage des thumbnails YouTube sur les cards.

X-Lovable-Edit-ID: edt-905aafec-16c9-4e82-90bd-23dbb578f2f5
gpt-engineer-app[bot] 6 dias atrás
pai
commit
f34e04467f
1 arquivos alterados com 9 adições e 2 exclusões
  1. 9 2
      src/components/NewsCard.tsx

+ 9 - 2
src/components/NewsCard.tsx

@@ -2,7 +2,7 @@ import { NewsItem } from '@/types/news';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Clock, Pin, ExternalLink, Eye, Trash2, Copy, Rss, Youtube, Gamepad2, Newspaper, Radio } from 'lucide-react';
+import { Clock, Pin, ExternalLink, Eye, Trash2, Copy, Rss, Youtube, Gamepad2, Newspaper, Radio, Play } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/hooks/useAuth';
 import { decodeHtmlEntities } from '@/utils/htmlDecode';
@@ -129,13 +129,20 @@ const NewsCard = ({
       <CardContent className="space-y-4" onClick={handleCardClick}>
         <div className="space-y-3">
           {news.imageUrl && (
-            <div className="w-full">
+            <div className="relative w-full">
               <img
                 src={news.imageUrl}
                 alt={news.title}
                 className="w-full h-48 object-cover rounded-md"
                 loading="lazy"
               />
+              {news.category === 'youtube' && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="bg-red-600 rounded-full p-3 shadow-lg group-hover:scale-110 transition-transform">
+                    <Play className="h-8 w-8 text-white fill-white" />
+                  </div>
+                </div>
+              )}
             </div>
           )}