development/023b14bb-1c4e-4c88-bb71-cedc86d52a11
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/blog/page.tsx

Browse Source
This commit is contained in:
development
2026-01-24 17:21:36 +00:00
parent dbbe4494b8
commit d9234c87e8
1 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/blog/page.tsx
View File

@@ -22,16 +22,16 @@ type BlogPost = {
const defaultPosts: BlogPost[] = [ const defaultPosts: BlogPost[] = [
{ {
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"), id: "1", category: "Ontwerp", title: "UX review presentaties", excerpt: "Hoe create je indrukwekkende presentaties die je collega's wow en je managers imponeren?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract ontwerp met paarse en zilveren tinten", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
}, },
{ {
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"), id: "2", category: "Ontwikkeling", title: "Bouw schaalbare applicaties", excerpt: "Leer de best practices voor het bouwen van applicaties die miljoenen gebruikers aankunnen.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Ontwikkelingswerkruimte", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
}, },
{ {
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"), id: "3", category: "Marketing", title: "Essentiële inhoudsstrategie", excerpt: "Ontdek hoe je een inhoudsstrategie maakt die engagement en conversies voortdrijft.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketingstrategie bord", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
}, },
{ {
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"), id: "4", category: "Product", title: "Productbeheer 101", excerpt: "Alles wat je moet weten om een effectieve productmanager in 2025 te worden.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Productplanningssessie", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
}, },
]; ];
@@ -46,7 +46,7 @@ export default function BlogPage() {
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID; const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) { if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts"); console.warn("NEXT_PUBLIC_API_URL of NEXT_PUBLIC_PROJECT_ID niet geconfigureerd, gebruik standaard posts");
setIsLoading(false); setIsLoading(false);
return; return;
} }
@@ -63,16 +63,16 @@ export default function BlogPage() {
if (Array.isArray(data) && data.length > 0) { if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({ const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()), id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }), category: post.category || "Algemeen", title: post.title || "Zonder titel", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anoniem", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("nl-NL", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`), onBlogClick: () => console.log(`Blog ${post.id} clicked`),
})); }));
setPosts(mappedPosts); setPosts(mappedPosts);
} }
} else { } else {
console.warn(`API request failed with status ${response.status}, using default posts`); console.warn(`API-verzoek mislukt met status ${response.status}, gebruik standaard posts`);
} }
} catch (error) { } catch (error) {
console.error("Error fetching posts:", error); console.error("Fout bij het ophalen van posts:", error);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -97,28 +97,28 @@ export default function BlogPage() {
<ReactLenis root> <ReactLenis root>
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Upcycled Threads" brandName="Geüpcycled Threads"
navItems={[ navItems={[
{ name: "Home", id: "/home" }, { name: "Home", id: "/home" },
{ name: "Home", id: "home" }, { name: "Home", id: "home" },
{ name: "About", id: "about" }, { name: "Over Ons", id: "about" },
{ name: "Shop", id: "products" }, { name: "Winkel", id: "products" },
{ name: "Process", id: "process" }, { name: "Proces", id: "process" },
{ name: "Contact", id: "contact" } { name: "Contact", id: "contact" }
]} ]}
bottomLeftText="Sustainable Fashion" bottomLeftText="Duurzame Mode"
bottomRightText="hello@upcycledthreads.com" bottomRightText="hallo@geupycyledthreads.nl"
/> />
{isLoading ? ( {isLoading ? (
<div className="w-content-width mx-auto py-20 text-center"> <div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p> <p className="text-foreground">Posts laden...</p>
</div> </div>
) : ( ) : (
<BlogCardTwo <BlogCardTwo
blogs={posts} blogs={posts}
title="Sustainable Fashion Insights" title="Inzichten Duurzame Mode"
description="Discover the latest trends and tips in sustainable fashion and upcycling" description="Ontdek de nieuwste trends en tips in duurzame mode en upcycling"
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
animationType="slide-up" animationType="slide-up"
@@ -127,7 +127,7 @@ export default function BlogPage() {
)} )}
<FooterLogoReveal <FooterLogoReveal
logoText="Upcycled Threads" logoText="Geüpcycled Threads"
/> />
</div> </div>
</ReactLenis> </ReactLenis>