61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { MangaGrid } from '../components/MangaGrid.jsx';
|
|
import { Layout } from '../components/Layout/Layout.jsx';
|
|
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
|
|
import { useManga } from '../context/MangaContext.jsx';
|
|
import {
|
|
faRefresh,
|
|
faSearch,
|
|
faGear,
|
|
faEye,
|
|
faSort,
|
|
faFilter
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
|
|
export function HomePage() {
|
|
const navigate = useNavigate();
|
|
const { collection, loading, error, loadCollection } = useManga();
|
|
|
|
useEffect(() => {
|
|
loadCollection();
|
|
}, [loadCollection]);
|
|
|
|
const handleMangaClick = (slug) => {
|
|
navigate(`/manga/${slug}`);
|
|
};
|
|
|
|
const handleAddMangaClick = (query = '') => {
|
|
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
|
};
|
|
|
|
const toolbarConfig = {
|
|
leftSection: [
|
|
{ icon: faRefresh, label: 'Refresh', onClick: loadCollection },
|
|
{ icon: faSearch, label: 'Search', onClick: () => {} }
|
|
],
|
|
rightSection: [
|
|
{ icon: faGear, onClick: () => {} },
|
|
{ icon: faEye, onClick: () => {} },
|
|
{ icon: faSort, onClick: () => {} },
|
|
{ icon: faFilter, onClick: () => {} }
|
|
]
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="flex justify-center items-center h-screen">Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="text-red-500 text-center p-4">{error}</div>;
|
|
}
|
|
|
|
return (
|
|
<Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
|
|
<Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
|
|
<div className="container mx-auto px-4">
|
|
<MangaGrid mangas={collection?.items || []} onMangaClick={handleMangaClick} />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
} |