Layout.tsx•2.68 kB
import React, { ReactNode, useState } from 'react';
import Sidebar from './Sidebar';
import SearchBar from './SearchBar';
import Link from 'next/link';
import FeedItemDetail from './FeedItemDetail';
interface LayoutProps {
children: ReactNode;
selectedCategory?: string;
selectedFeed?: string;
}
export default function Layout({ children, selectedCategory, selectedFeed }: LayoutProps) {
const [selectedItem, setSelectedItem] = useState<string | null>(null);
// Create a context object to pass to children
const childContext = {
setSelectedItem
};
return (
<div className="flex min-h-screen bg-gray-50">
{/* Left Pane: Sidebar */}
<Sidebar selectedCategory={selectedCategory} selectedFeed={selectedFeed} />
{/* Middle and Right Panes */}
<div className="flex-1 flex flex-col">
{/* Header */}
<header className="bg-white shadow-sm">
<div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div>
<Link href="/" className="text-xl font-bold text-gray-900">
RSS Feed Viewer
</Link>
</div>
<SearchBar />
</div>
</header>
{/* Main content - 2 panes side by side */}
<main className="flex-1 overflow-hidden flex">
{/* Middle Pane: Feed Item List */}
<div className="w-1/2 overflow-y-auto border-r border-gray-200">
<div className="px-4 sm:px-6 lg:px-8 py-4">
{/* Create a context provider for the children */}
<LayoutContext.Provider value={childContext}>
{children}
</LayoutContext.Provider>
</div>
</div>
{/* Right Pane: Content Display */}
<div className="w-1/2 overflow-y-auto">
{selectedItem ? (
<FeedItemDetail itemId={selectedItem} />
) : (
<div className="flex items-center justify-center h-full text-gray-500">
<p>Select an item to view its content</p>
</div>
)}
</div>
</main>
{/* Footer */}
<footer className="bg-white shadow-sm-top py-4">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-500 text-sm">
RSS Feed Viewer - View and manage your RSS feeds
</div>
</footer>
</div>
</div>
);
}
// Create a context for the layout
export const LayoutContext = React.createContext<{
setSelectedItem: (itemId: string | null) => void;
}>({
setSelectedItem: () => {}
});