Gaming and anime .

 import React, { useState, useEffect } from 'react';

import { Heart, Share2, Bookmark, TrendingUp, Gamepad2, Tv, ChevronRight, Search, Menu, X, ExternalLink } from 'lucide-react';

const AnimeGamingApp = () => {

  const [activeTab, setActiveTab] = useState('trending');

  const [searchQuery, setSearchQuery] = useState('');

  const [menuOpen, setMenuOpen] = useState(false);

  const [bookmarked, setBookmarked] = useState({});

  const [liked, setLiked] = useState({});

  // Simulated news feed with auto-refresh

  const [newsItems, setNewsItems] = useState([

    {

      id: 1,

      type: 'anime',

      title: 'New Attack on Titan Movie Announced',

      excerpt: 'Studio MAPPA reveals plans for a feature film continuing the saga',

      image: 'https://images.unsplash.com/photo-1578632767115-351597cf2477?w=400&h=300&fit=crop',

      likes: 1247,

      category: 'Announcement',

      trending: true,

      time: '2h ago'

    },

    {

      id: 2,

      type: 'gaming',

      title: 'Elden Ring DLC Breaks Records',

      excerpt: 'Shadow of the Erdtree becomes fastest-selling expansion',

      image: 'https://images.unsplash.com/photo-1511512578047-dfb367046420?w=400&h=300&fit=crop',

      likes: 2891,

      category: 'Breaking',

      trending: true,

      time: '4h ago'

    },

    {

      id: 3,

      type: 'anime',

      title: 'Demon Slayer Season 4 Trailer Drops',

      excerpt: 'Hashira Training Arc gets explosive new preview',

      image: 'https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?w=400&h=300&fit=crop',

      likes: 3456,

      category: 'Trailer',

      trending: true,

      time: '5h ago'

    },

    {

      id: 4,

      type: 'gaming',

      title: 'GTA 6 Release Date Confirmed',

      excerpt: 'Rockstar finally announces official launch window',

      image: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=300&fit=crop',

      likes: 5234,

      category: 'Breaking',

      trending: true,

      time: '6h ago'

    },

    {

      id: 5,

      type: 'anime',

      title: 'My Hero Academia Final Arc Begins',

      excerpt: 'Manga reaches climactic conclusion in latest chapter',

      image: 'https://images.unsplash.com/photo-1612036782180-6f0b6cd846fe?w=400&h=300&fit=crop',

      likes: 1876,

      category: 'Manga',

      trending: false,

      time: '8h ago'

    },

    {

      id: 6,

      type: 'gaming',

      title: 'Hollow Knight: Silksong Update',

      excerpt: 'Team Cherry shares development progress',

      image: 'https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=400&h=300&fit=crop',

      likes: 2145,

      category: 'Update',

      trending: false,

      time: '10h ago'

    }

  ]);

  const toggleBookmark = (id) => {

    setBookmarked(prev => ({ ...prev, [id]: !prev[id] }));

  };

  const toggleLike = (id) => {

    setLiked(prev => ({ ...prev, [id]: !prev[id] }));

    setNewsItems(items => items.map(item => 

      item.id === id ? { ...item, likes: item.likes + (liked[id] ? -1 : 1) } : item

    ));

  };

  const shareContent = (item) => {

    const text = `Check out: ${item.title}`;

    const url = window.location.href;

    

    if (navigator.share) {

      navigator.share({ title: item.title, text, url });

    } else {

      alert('Share: ' + text);

    }

  };

  const filteredItems = newsItems.filter(item => {

    const matchesSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||

                         item.excerpt.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesTab = activeTab === 'trending' ? item.trending :

                      activeTab === 'anime' ? item.type === 'anime' :

                      activeTab === 'gaming' ? item.type === 'gaming' :

                      activeTab === 'bookmarks' ? bookmarked[item.id] : true;

    return matchesSearch && matchesTab;

  });

  return (

    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">

      {/* Header */}

      <div className="bg-black/30 backdrop-blur-lg border-b border-white/10 sticky top-0 z-50">

        <div className="max-w-6xl mx-auto px-4 py-4">

          <div className="flex items-center justify-between mb-4">

            <div className="flex items-center gap-3">

              <div className="w-10 h-10 bg-gradient-to-br from-pink-500 to-purple-600 rounded-xl flex items-center justify-center">

                <TrendingUp className="w-6 h-6 text-white" />

              </div>

              <div>

                <h1 className="text-xl font-bold text-white">ViralVerse</h1>

                <p className="text-xs text-purple-300">Anime & Gaming Hub</p>

              </div>

            </div>

            <button 

              onClick={() => setMenuOpen(!menuOpen)}

              className="md:hidden text-white"

            >

              {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}

            </button>

          </div>

          {/* Search Bar */}

          <div className="relative">

            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />

            <input

              type="text"

              placeholder="Search anime or gaming news..."

              value={searchQuery}

              onChange={(e) => setSearchQuery(e.target.value)}

              className="w-full bg-white/10 border border-white/20 rounded-xl pl-11 pr-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"

            />

          </div>

        </div>

      </div>

      {/* Navigation Tabs */}

      <div className="bg-black/20 backdrop-blur-sm border-b border-white/10 sticky top-[140px] z-40">

        <div className="max-w-6xl mx-auto px-4">

          <div className={`flex gap-2 overflow-x-auto py-3 ${menuOpen ? 'flex-col md:flex-row' : ''}`}>

            {[

              { id: 'trending', icon: TrendingUp, label: 'Trending' },

              { id: 'anime', icon: Tv, label: 'Anime' },

              { id: 'gaming', icon: Gamepad2, label: 'Gaming' },

              { id: 'bookmarks', icon: Bookmark, label: 'Saved' }

            ].map(tab => (

              <button

                key={tab.id}

                onClick={() => {

                  setActiveTab(tab.id);

                  setMenuOpen(false);

                }}

                className={`flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium transition-all whitespace-nowrap ${

                  activeTab === tab.id

                    ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg'

                    : 'bg-white/5 text-gray-300 hover:bg-white/10'

                }`}

              >

                <tab.icon className="w-4 h-4" />

                {tab.label}

              </button>

            ))}

          </div>

        </div>

      </div>

      {/* Content Feed */}

      <div className="max-w-6xl mx-auto px-4 py-6">

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">

          {filteredItems.map(item => (

            <div

              key={item.id}

              className="bg-black/30 backdrop-blur-sm rounded-2xl overflow-hidden border border-white/10 hover:border-purple-500/50 transition-all hover:shadow-xl hover:shadow-purple-500/20 group"

            >

              {/* Image */}

              <div className="relative overflow-hidden">

                <img

                  src={item.image}

                  alt={item.title}

                  className="w-full h-48 object-cover transition-transform group-hover:scale-110"

                />

                <div className="absolute top-3 left-3">

                  <span className={`px-3 py-1 rounded-full text-xs font-bold ${

                    item.category === 'Breaking' ? 'bg-red-500' :

                    item.category === 'Announcement' ? 'bg-blue-500' :

                    item.category === 'Trailer' ? 'bg-purple-500' :

                    'bg-green-500'

                  } text-white`}>

                    {item.category}

                  </span>

                </div>

                {item.trending && (

                  <div className="absolute top-3 right-3">

                    <div className="bg-gradient-to-r from-orange-500 to-pink-500 px-2 py-1 rounded-full flex items-center gap-1">

                      <TrendingUp className="w-3 h-3 text-white" />

                      <span className="text-xs font-bold text-white">HOT</span>

                    </div>

                  </div>

                )}

              </div>

              {/* Content */}

              <div className="p-4">

                <div className="flex items-center gap-2 mb-2">

                  {item.type === 'anime' ? (

                    <Tv className="w-4 h-4 text-purple-400" />

                  ) : (

                    <Gamepad2 className="w-4 h-4 text-blue-400" />

                  )}

                  <span className="text-xs text-gray-400">{item.time}</span>

                </div>

                

                <h3 className="text-lg font-bold text-white mb-2 line-clamp-2">

                  {item.title}

                </h3>

                <p className="text-sm text-gray-300 mb-4 line-clamp-2">

                  {item.excerpt}

                </p>

                {/* Actions */}

                <div className="flex items-center justify-between pt-3 border-t border-white/10">

                  <div className="flex items-center gap-3">

                    <button

                      onClick={() => toggleLike(item.id)}

                      className="flex items-center gap-1 text-gray-300 hover:text-pink-500 transition-colors"

                    >

                      <Heart className={`w-5 h-5 ${liked[item.id] ? 'fill-pink-500 text-pink-500' : ''}`} />

                      <span className="text-sm font-medium">{item.likes}</span>

                    </button>

                    

                    <button

                      onClick={() => shareContent(item)}

                      className="text-gray-300 hover:text-blue-400 transition-colors"

                    >

                      <Share2 className="w-5 h-5" />

                    </button>

                    

                    <button

                      onClick={() => toggleBookmark(item.id)}

                      className="text-gray-300 hover:text-yellow-400 transition-colors"

                    >

                      <Bookmark className={`w-5 h-5 ${bookmarked[item.id] ? 'fill-yellow-400 text-yellow-400' : ''}`} />

                    </button>

                  </div>

                  

                  <button className="flex items-center gap-1 text-purple-400 hover:text-purple-300 transition-colors text-sm font-medium">

                    Read More

                    <ChevronRight className="w-4 h-4" />

                  </button>

                </div>

              </div>

            </div>

          ))}

        </div>

        {filteredItems.length === 0 && (

          <div className="text-center py-16">

            <div className="text-gray-400 text-lg">No content found</div>

            <p className="text-gray-500 text-sm mt-2">Try adjusting your search or filters</p>

          </div>

        )}

      </div>

      {/* Social Share Footer */}

      <div className="bg-black/30 backdrop-blur-lg border-t border-white/10 mt-8">

        <div className="max-w-6xl mx-auto px-4 py-6">

          <div className="text-center">

            <p className="text-gray-300 text-sm mb-3">Share on Social Media</p>

            <div className="flex justify-center gap-3 flex-wrap">

              {['Twitter', 'Facebook', 'Reddit', 'Discord', 'Instagram'].map(platform => (

                <button

                  key={platform}

                  className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2"

                >

                  <ExternalLink className="w-4 h-4" />

                  {platform}

                </button>https://claude.ai/public/artifacts/839313fe-d0b9-41b7-a314-2af2e288b6d1

              ))}

            </div>

          </div>

        </div>https://claude.ai/public/artifacts/839313fe-d0b9-41b7-a314-2af2e288b6d1

https://claude.ai/public/artifacts/839313fe-d0b9-41b7-a314-2af2e288b6d1

      </div>

    </div>

  );

};

export default AnimeGamingApp;