fetch real api

src/pages/Blog.tsx

@@ -7,7 +7,6 @@ import { Input } from '@/components/ui/input';
 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'];
@@ -31,14 +30,15 @@ const itemVariants = {
 
 export default function Blog() {
 
-  
+  const {data} = useBlogs();
+  const blogPosts = data?.data.result;
   
 
 
   const [activeCategory, setActiveCategory] = useState('All');
   const [searchQuery, setSearchQuery] = useState('');
 
-  const filteredPosts = blogPosts.filter(post => {
+  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());
@@ -137,13 +137,13 @@ export default function Blog() {
               animate="visible"
               className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
             >
-              {filteredPosts.map((post) => (
+              {filteredPosts?.map((post) => (
                 <motion.article
-                  key={post.id}
+                  key={post._id}
                   variants={itemVariants}
                   className="group glass rounded-2xl overflow-hidden hover:neon-glow transition-all duration-500"
                 >
-                  <Link to={`/blog/${post.slug}`}>
+                  <Link to={`/blog/${post._id}`}>
                     <div className="relative h-48 overflow-hidden">
                       <img
                         src={post.image}
@@ -184,7 +184,7 @@ export default function Blog() {
               ))}
             </motion.div>
 
-            {filteredPosts.length === 0 && (
+            {filteredPosts?.length === 0 && (
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}