61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { Search, BookOpen, Download, Server, Library } from 'lucide-react';
|
|
import { useStore } from '../store/useStore';
|
|
|
|
export function HomePage() {
|
|
const { serverConnected } = useStore();
|
|
|
|
return (
|
|
<div className="page home-page">
|
|
<div className="hero">
|
|
<div className="hero-content">
|
|
<h1>MangaDL</h1>
|
|
<p className="hero-subtitle">Browse, read, and download manga from MangaKatana</p>
|
|
|
|
<div className="hero-search">
|
|
<Search className="search-icon-large" />
|
|
<Link to="/search?q=" className="search-placeholder">
|
|
Search for manga...
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="hero-features">
|
|
<div className="feature">
|
|
<BookOpen size={24} />
|
|
<span>Browse Manga</span>
|
|
</div>
|
|
<div className="feature">
|
|
<Download size={24} />
|
|
<span>Download Chapters</span>
|
|
</div>
|
|
<div className="feature">
|
|
<Library size={24} />
|
|
<span>Read Online</span>
|
|
</div>
|
|
<div className="feature">
|
|
<Server size={24} />
|
|
<span>Self-hosted Backend</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="server-status-banner">
|
|
<Server className={serverConnected ? 'online' : 'offline'} size={20} />
|
|
<span>
|
|
Backend: {serverConnected ? 'Connected' : 'Disconnected'}
|
|
{!serverConnected && ' - Start ifetch server on port 8080'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="getting-started">
|
|
<h2>Getting Started</h2>
|
|
<ol>
|
|
<li>Run <code>ifetch --server --port 8080</code> to start the backend server</li>
|
|
<li>Search for manga using the search bar above</li>
|
|
<li>Click on a manga to view chapters and start reading</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |