feat: add slide-down animation to FloatingBar and enhance search behavior in DataBar

This commit is contained in:
Sam Chau
2025-01-09 15:42:41 +10:30
parent 4ebe79d9f7
commit 2242bd2c4d
2 changed files with 56 additions and 41 deletions

View File

@@ -7,7 +7,7 @@ import AddButton from './AddButton';
const FloatingBar = ({children}) => (
<>
<div className='fixed top-0 left-0 right-0 z-50 bg-gradient-to-br from-gray-800 to-gray-900 border-b border-gray-700 shadow-xl backdrop-blur-sm'>
<div className='fixed top-0 left-0 right-0 z-50 animate-slide-down bg-gradient-to-br from-gray-800 to-gray-900 border-b border-gray-700 shadow-xl backdrop-blur-sm'>
<div className='max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8'>
<div className='flex items-center gap-4 h-16'>{children}</div>
</div>
@@ -47,8 +47,15 @@ const DataBar = ({
}, []);
const handleSearch = term => {
// First set the search term and trigger the search
setActiveSearch(term);
onSearch(term);
// Then smoothly scroll to top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
const controls = (