@@ -9,10 +9,12 @@ import Footer from '../components/Footer/Footer';
|
||||
// Debounce hook
|
||||
function useDebouncedValue(value, delay = 250) {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(handler);
|
||||
}, [value, delay]);
|
||||
|
||||
return debounced;
|
||||
}
|
||||
|
||||
@@ -51,13 +53,14 @@ function HomePage() {
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', minHeight: '100vh', paddingBottom: '60px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
|
||||
{/* Main content scrollable area */}
|
||||
<div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
|
||||
<div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
{/* Left panel: card list */}
|
||||
<div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
|
||||
<h2>Card List</h2>
|
||||
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
|
||||
|
||||
<Virtuoso
|
||||
style={{ height: '100%' }}
|
||||
data={filteredCards}
|
||||
@@ -84,11 +87,9 @@ function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer fixed at the bottom */}
|
||||
<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
|
||||
{/* Footer at the bottom */}
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user