54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { AnnouncementBar } from '@/layout/AnnouncementBar';
|
|
import { Header } from '@/layout/Header';
|
|
import { Navbar } from '@/layout/Navbar';
|
|
import { Footer } from '@/layout/Footer';
|
|
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
|
|
import { FloatingButtons } from '@/components/FloatingButtons';
|
|
import { BlogListing } from '@/components/blog/BlogViews';
|
|
import { DEMO_BLOG_ARTICLES, BlogArticle, BlogCategory } from '@/lib/blogDefaults';
|
|
import { storefrontService } from '@/services/api/storefrontService';
|
|
|
|
export default function BlogIndexPage() {
|
|
const [articles, setArticles] = useState(DEMO_BLOG_ARTICLES);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
storefrontService.getBlogPosts().then((posts) => {
|
|
if (!cancelled && posts && posts.length > 0) {
|
|
const mapped: BlogArticle[] = posts.map((p: any) => ({
|
|
slug: (p.title || '').toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-'),
|
|
title: p.title || '',
|
|
excerpt: p.excerpt || '',
|
|
author: typeof p.author === 'string' ? p.author : (p.author?.name || 'iFixKart Team'),
|
|
date: p.date || '10 Sep 2026',
|
|
readTime: '5 min read',
|
|
category: (['News', 'Reviews', 'Guides', 'Repair'].includes(p.category) ? p.category : 'Guides') as BlogCategory,
|
|
image: p.image_url || 'https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=800&q=80',
|
|
body: [p.content || p.excerpt || ''],
|
|
}));
|
|
setArticles(mapped);
|
|
}
|
|
}).catch(() => {});
|
|
return () => { cancelled = true; };
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
|
|
<AnnouncementBar />
|
|
<Header />
|
|
<StickyHeaderSpacer />
|
|
<Navbar />
|
|
<main className="flex-grow py-10 pb-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px]">
|
|
<BlogListing articles={articles} />
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
<FloatingButtons />
|
|
</div>
|
|
);
|
|
}
|
|
|