From 74154d0a276297618b300e169f585719cf2aa1c5 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 14:05:08 +0000 Subject: [PATCH] Update src/app/blog/page.tsx --- src/app/blog/page.tsx | 57 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 2 deletions(-) diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index 1c33ba4..527cf59 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -20,6 +20,18 @@ type BlogPost = { onBlogClick?: () => void; }; +type BlogCard = { + id: string; + title: string; + author: string; + description: string; + tags: string[]; + onBlogClick?: () => void; +} & ( + | { imageSrc: string; imageAlt?: string; videoSrc?: never; videoAriaLabel?: never } + | { videoSrc: string; videoAriaLabel?: string; imageSrc?: never; imageAlt?: never } +); + const defaultPosts: BlogPost[] = [ { id: "1", title: "The Art of Coffee Brewing", author: "Sarah Johnson", description: "Discover the secrets behind the perfect cup of coffee with our comprehensive brewing guide.", tags: ["Coffee", "Brewing", "Guide"], @@ -39,6 +51,43 @@ const defaultPosts: BlogPost[] = [ }, ]; +function convertToBlogCard(post: BlogPost): BlogCard { + // Ensure we have either imageSrc or videoSrc, prioritizing imageSrc + if (post.imageSrc) { + return { + id: post.id, + title: post.title, + author: post.author, + description: post.description, + tags: post.tags, + imageSrc: post.imageSrc, + imageAlt: post.imageAlt, + onBlogClick: post.onBlogClick + }; + } else if (post.videoSrc) { + return { + id: post.id, + title: post.title, + author: post.author, + description: post.description, + tags: post.tags, + videoSrc: post.videoSrc, + videoAriaLabel: post.videoAriaLabel, + onBlogClick: post.onBlogClick + }; + } else { + // Fallback to placeholder image if neither exists + return { + id: post.id, + title: post.title, + author: post.author, + description: post.description, + tags: post.tags, + imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Blog post image", onBlogClick: post.onBlogClick + }; + } +} + export default function BlogPage() { const [posts, setPosts] = useState(defaultPosts); const [isLoading, setIsLoading] = useState(true); @@ -58,7 +107,8 @@ export default function BlogPage() { const url = `${apiUrl}/posts/${projectId}`; const response = await fetch(url, { method: "GET", headers: { - "Content-Type": "application/json"}, + "Content-Type": "application/json" + }, }); if (response.ok) { @@ -84,6 +134,9 @@ export default function BlogPage() { fetchPosts(); }, []); + // Convert BlogPost[] to BlogCard[] + const blogCards: BlogCard[] = posts.map(convertToBlogCard); + return ( ) : (