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

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

@@ -22,16 +22,16 @@ type 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;
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);
return;
}
@@ -63,16 +63,16 @@ export default function BlogPage() {
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
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`),
}));
setPosts(mappedPosts);
}
} 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) {
console.error("Error fetching posts:", error);
console.error("Fout bij het ophalen van posts:", error);
} finally {
setIsLoading(false);
}
@@ -97,28 +97,28 @@ export default function BlogPage() {
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleFullscreen
brandName="Upcycled Threads"
brandName="Geüpcycled Threads"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Shop", id: "products" },
{ name: "Process", id: "process" },
{ name: "Over Ons", id: "about" },
{ name: "Winkel", id: "products" },
{ name: "Proces", id: "process" },
{ name: "Contact", id: "contact" }
]}
bottomLeftText="Sustainable Fashion"
bottomRightText="hello@upcycledthreads.com"
bottomLeftText="Duurzame Mode"
bottomRightText="hallo@geupycyledthreads.nl"
/>
{isLoading ? (
<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>
) : (
<BlogCardTwo
blogs={posts}
title="Sustainable Fashion Insights"
description="Discover the latest trends and tips in sustainable fashion and upcycling"
title="Inzichten Duurzame Mode"
description="Ontdek de nieuwste trends en tips in duurzame mode en upcycling"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
@@ -127,10 +127,10 @@ export default function BlogPage() {
)}
<FooterLogoReveal
logoText="Upcycled Threads"
logoText="Geüpcycled Threads"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}