implement tanstack and fetch all data

src/pages/Blog.tsx

@@ -8,6 +8,7 @@ import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import PageTransition from '@/components/PageTransition';
 import { blogPosts } from '@/data/blogData';
+import { useBlogs } from './../hooks/queires/useBlogs';
 
 const categories = ['All', 'AI & Machine Learning', 'Cloud Solutions', 'Web Development', 'Mobile Development'];
 
@@ -29,13 +30,18 @@ const itemVariants = {
 };
 
 export default function Blog() {
+
+  
+  
+
+
   const [activeCategory, setActiveCategory] = useState('All');
   const [searchQuery, setSearchQuery] = useState('');
 
   const filteredPosts = blogPosts.filter(post => {
     const matchesCategory = activeCategory === 'All' || post.category === activeCategory;
     const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                          post.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
+      post.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
     return matchesCategory && matchesSearch;
   });
 
@@ -110,11 +116,10 @@ export default function Blog() {
                   key={category}
                   variant={activeCategory === category ? 'default' : 'outline'}
                   onClick={() => setActiveCategory(category)}
-                  className={`rounded-full px-6 transition-all duration-300 ${
-                    activeCategory === category
-                      ? 'neon-glow bg-primary text-primary-foreground'
-                      : 'glass border-primary/30 hover:border-primary'
-                  }`}
+                  className={`rounded-full px-6 transition-all duration-300 ${activeCategory === category
+                    ? 'neon-glow bg-primary text-primary-foreground'
+                    : 'glass border-primary/30 hover:border-primary'
+                    }`}
                 >
                   {category}
                 </Button>