Home.jsx

import React, { useEffect, useState } from 'react';
import PostList from '../components/PostList';
import ApiStatusIndicator from '../components/ApiStatusIndicator';

const API_URL = 'https://super-barnacle-g4964vwvq4p5hvj67-3000.app.github.dev/api/posts';

export default function Home() {
  const [posts, setPosts] = useState([]);
  const [apiAvailable, setApiAvailable] = useState(true);

  useEffect(() => {
    fetch(API_URL)
      .then(res => {
        if (!res.ok) throw new Error('API unavailable');
        return res.json();
      })
      .then(data => {
        setPosts(data);
        setApiAvailable(true);
      })
      .catch(() => {
        setApiAvailable(false);
      });
  }, []);

  return (
    <div className="home-page" style={{ background: '#F5F6FA', minHeight: '100vh', padding: '0', fontFamily: 'Inter, Arial, sans-serif' }}>
      <header style={{ background: '#fff', boxShadow: '0 2px 8px #e0e0e0', padding: '32px 0 24px 0', textAlign: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
          <img src="/vite.svg" alt="App logo" style={{ width: 48, height: 48, borderRadius: '50%' }} />
          <h1 style={{ fontWeight: 700, fontSize: '2.5rem', margin: 0, color: '#222' }}>Simple Social Media</h1>
        </div>
        <p style={{ color: '#888', fontSize: '1.1rem', marginTop: 8 }}>Connect, share, and interact with the community</p>
        <ApiStatusIndicator available={apiAvailable} />
      </header>
      <main style={{ maxWidth: 600, margin: '32px auto', padding: '0 16px' }}>
        <PostList posts={posts} />
      </main>
    </div>
  );
}