summer2026/techzaa-frontend
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fetch real api

Browse Source
This commit is contained in:
rahat0078
2026-04-06 01:05:05 +06:00
parent d856617c51
commit a8b73d81ec
7 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ function AnimatedRoutes() {
<Route path="/projects" element={<Projects />} />
<Route path="/projects/:slug" element={<ProjectDetails />} />
<Route path="/blog" element={<Blog />} />
<Route path="/blog/:slug" element={<BlogArticle />} />
<Route path="/blog/:id" element={<BlogArticle />} />
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
<Route path="*" element={<NotFound />} />
</Routes>
src/components/BlogSection.tsx
+9 -4
View File
@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
import { Calendar, Clock, ArrowRight, User } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { blogPosts } from '@/data/blogData';
import { useBlogs } from '@/hooks/queires/useBlogs';
const containerVariants = {
hidden: { opacity: 0 },
@@ -24,6 +24,11 @@ const itemVariants = {
};
export default function BlogSection() {
const {data} = useBlogs()
const blogPosts = data?.data.result;
return (
<section id="blog" className="py-24 relative overflow-hidden">
{/* Background elements */}
@@ -57,9 +62,9 @@ export default function BlogSection() {
viewport={{ once: true, margin: "-100px" }}
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
>
{blogPosts.map((post) => (
{blogPosts?.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"
>
@@ -103,7 +108,7 @@ export default function BlogSection() {
{/* Read More */}
<Link
to={`/blog/${post.slug}`}
to={`/blog/${post._id}`}
className="inline-flex items-center gap-2 text-primary font-medium text-sm group/link hover:gap-3 transition-all"
>
Read Article
src/components/ProjectsSection.tsx
+1 -2
View File
@@ -22,8 +22,7 @@ export default function ProjectsSection() {
});
const projects = projectsData?.data.data.result
console.log(projects);
const projects = projectsData?.data.data.result;
src/data/blogData.ts
+4 -1
View File
@@ -56,6 +56,9 @@ export const authors: Record<string, Author> = {
},
};
export const blogPosts: BlogPost[] = [
{
id: 1,
@@ -550,4 +553,4 @@ export const getRelatedPosts = (currentPost: BlogPost, limit: number = 3): BlogP
return blogPosts
.filter(post => post.id !== currentPost.id && post.category === currentPost.category)
.slice(0, limit);
};
};
src/pages/Blog.tsx
+7 -7
View File
@@ -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 }}
src/pages/BlogArticle.tsx
+6 -2
View File
@@ -9,11 +9,15 @@ import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import PageTransition from '@/components/PageTransition';
import { getPostBySlug, getRelatedPosts } from '@/data/blogData';
import { useBlogById } from '@/hooks/queires/useBlogs';
export default function BlogArticle() {
const { slug } = useParams<{ slug: string }>();
const { id } = useParams<{ id: string }>();
const {data} = useBlogById(id);
const post = data?.data.data
const navigate = useNavigate();
const post = getPostBySlug(slug || '');
// const post = getPostBySlug(id || '');
if (!post) {
return (
src/pages/Projects.tsx
+12 -12
View File
@@ -1,16 +1,13 @@
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeft, Globe, Smartphone, Brain, Cloud, ExternalLink, Github } from 'lucide-react';
import { motion, AnimatePresence, calcLength } from 'framer-motion';
import { ArrowLeft, Globe, Smartphone, Brain, Cloud, ExternalLink, Workflow, Github } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import PageTransition from '@/components/PageTransition';
import { useProjects } from '@/hooks/queires/useProjects';
import { projects } from '@/data/projectData';
import { useBlogById, useBlogs } from './../hooks/queires/useBlogs';
import { useProjectById, useProjects } from '@/hooks/queires/useProjects';
import { useTeam } from '@/hooks/queires/useTeam';
import { useReviews } from '@/hooks/queires/useReviews';
const categories = [
{ id: 'all', name: 'All Projects', icon: null },
@@ -18,6 +15,7 @@ const categories = [
{ id: 'mobile', name: 'Mobile', icon: Smartphone },
{ id: 'ai', name: 'AI', icon: Brain },
{ id: 'cloud', name: 'Cloud', icon: Cloud },
{ id: 'devops', name: 'DEVOPS', icon: Workflow },
];
const containerVariants = {
@@ -41,12 +39,14 @@ const itemVariants = {
export default function Projects() {
const {data: projectsData} = useProjects();
const projects = projectsData?.data.data.result;
const [activeCategory, setActiveCategory] = useState('all');
const filteredProjects = activeCategory === 'all'
? projects
: projects.filter(project => project.category === activeCategory);
: projects?.filter(project => project.category === activeCategory);
return (
<PageTransition>
@@ -97,7 +97,7 @@ export default function Projects() {
transition={{ duration: 0.6, delay: 0.2 }}
className="flex flex-wrap justify-center gap-3 mb-16"
>
{categories.map((category) => {
{categories?.map((category) => {
const Icon = category.icon;
return (
<Button
@@ -130,9 +130,9 @@ export default function Projects() {
exit="hidden"
className="grid md:grid-cols-2 gap-8"
>
{filteredProjects.map((project) => (
{filteredProjects?.map((project) => (
<motion.article
key={project.id}
key={project._id}
variants={itemVariants}
layout
className="group glass rounded-3xl overflow-hidden hover:neon-glow transition-all duration-500"
@@ -193,7 +193,7 @@ export default function Projects() {
{/* Technologies */}
<div className="flex flex-wrap gap-2">
{project.technologies.map((tech) => (
{project?.technologies.map((tech) => (
<span
key={tech}
className="px-3 py-1 rounded-full bg-muted text-muted-foreground text-xs font-medium"
@@ -209,7 +209,7 @@ export default function Projects() {
</AnimatePresence>
{/* Empty State */}
{filteredProjects.length === 0 && (
{filteredProjects?.length === 0 && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}