Refactor Friends component to implement category filtering and update friend links data

src/pages/Friends.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
 import Layout from '../components/Layout'
 import '../App.css'
 
@@ -13,69 +14,40 @@ interface FriendLink {
 
 function Friends() {
   const { t } = useTranslation()
+  const [selectedCategory, setSelectedCategory] = useState<string>('All')
 
   // Mock friend links data
   const friendLinks: FriendLink[] = [
     {
       id: 1,
-      name: "GameDev Hub",
+      name: "Steam Profile",
-      description: "A community for game developers sharing tutorials and resources",
+      description: "Follow my gaming journey, see what I'm playing, and connect with me on Steam",
-      url: "https://gamedevhub.example.com",
+      url: "https://steamcommunity.com/profiles/76561198281616762",
-      category: "Development"
+      category: "Admin"
     },
     {
       id: 2,
-      name: "Counter-Strike Pro",
+      name: "VRChat",
-      description: "Professional Counter-Strike training and analysis platform",
+      description: "Join me in virtual reality! Explore worlds, hang out, and experience VR together",
-      url: "https://cspro.example.com",
+      url: "https://vrchat.com/home/user/usr_621802be-d8eb-4e82-bea0-97463c0d1a57",
-      category: "Gaming"
+      category: "Admin"
     },
     {
       id: 3,
-      name: "Tech Blog Central",
+      name: "GitHub",
-      description: "Latest technology news and programming tutorials",
+      description: "Check out my code repositories, open source projects, and development work",
-      url: "https://techblog.example.com",
+      url: "https://github.com/moemoequte",
-      category: "Technology"
+      category: "Admin"
-    },
-    {
-      id: 4,
-      name: "Esports Arena",
-      description: "Comprehensive esports coverage and tournament information",
-      url: "https://esportsarena.example.com",
-      category: "Esports"
-    },
-    {
-      id: 5,
-      name: "Open Source Gaming",
-      description: "Open source gaming projects and community contributions",
-      url: "https://opensourcegaming.example.com",
-      category: "Open Source"
-    },
-    {
-      id: 6,
-      name: "Gaming News Daily",
-      description: "Daily gaming news, reviews, and industry updates",
-      url: "https://gamingnews.example.com",
-      category: "News"
-    },
-    {
-      id: 7,
-      name: "React Game Dev",
-      description: "Building games with React and modern web technologies",
-      url: "https://reactgamedev.example.com",
-      category: "Development"
-    },
-    {
-      id: 8,
-      name: "Competitive Gaming",
-      description: "Tips, strategies, and guides for competitive gaming",
-      url: "https://competitivegaming.example.com",
-      category: "Gaming"
     }
   ]
 
   const categories = [...new Set(friendLinks.map(link => link.category))]
   
+  // Filter friends based on selected category
+  const filteredFriends = selectedCategory === 'All' 
+    ? friendLinks 
+    : friendLinks.filter(link => link.category === selectedCategory)
+
   return (
     <Layout currentPage="friends">
       {/* Friends Page Content */}
@@ -91,27 +63,36 @@ function Friends() {
 
         {/* Category Filter */}
         <div className="friends-categories" style={{ display: 'flex', justifyContent: 'center', gap: '1rem', marginBottom: '3rem', flexWrap: 'wrap' }}>
-          <button className="category-btn active" style={{
+          <button 
+            className={`category-btn ${selectedCategory === 'All' ? 'active' : ''}`}
+            onClick={() => setSelectedCategory('All')}
+            style={{
               padding: '0.5rem 1rem',
-            border: '1px solid var(--accent-color)',
+              border: `1px solid ${selectedCategory === 'All' ? 'var(--accent-color)' : 'var(--border-color)'}`,
-            background: 'var(--accent-color)',
+              background: selectedCategory === 'All' ? 'var(--accent-color)' : 'var(--bg-card)',
-            color: 'white',
+              color: selectedCategory === 'All' ? 'white' : 'var(--text-primary)',
               borderRadius: '20px',
               cursor: 'pointer',
               transition: 'all 0.3s ease'
-          }}>
+            }}
+          >
             {t('friends.allCategories')}
           </button>
           {categories.map(category => (
-            <button key={category} className="category-btn" style={{
+            <button 
+              key={category} 
+              className={`category-btn ${selectedCategory === category ? 'active' : ''}`}
+              onClick={() => setSelectedCategory(category)}
+              style={{
                 padding: '0.5rem 1rem',
-              border: '1px solid var(--border-color)',
+                border: `1px solid ${selectedCategory === category ? 'var(--accent-color)' : 'var(--border-color)'}`,
-              background: 'var(--bg-card)',
+                background: selectedCategory === category ? 'var(--accent-color)' : 'var(--bg-card)',
-              color: 'var(--text-primary)',
+                color: selectedCategory === category ? 'white' : 'var(--text-primary)',
                 borderRadius: '20px',
                 cursor: 'pointer',
                 transition: 'all 0.3s ease'
-            }}>
+              }}
+            >
               {category}
             </button>
           ))}
@@ -123,7 +104,7 @@ function Friends() {
           gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
           gap: '2rem'
         }}>
-          {friendLinks.map(friend => (
+          {filteredFriends.map(friend => (
             <div key={friend.id} className="friend-card" style={{
               background: 'var(--bg-card)',
               border: '1px solid var(--border-color)',
@@ -222,7 +203,7 @@ function Friends() {
             {t('friends.joinDescription')}
           </p>
           <a
-            href="mailto:contact@cialloo.com?subject=Friend Link Request"
+            href="mailto:admin@cialloo.com?subject=Friend Link Request"
             style={{
               display: 'inline-block',
               background: 'var(--accent-color)',