| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| import React from 'react'; |
| import { Button } from '@douyinfe/semi-ui'; |
| import { RefreshCw, Search } from 'lucide-react'; |
|
|
| const DashboardHeader = ({ |
| getGreeting, |
| greetingVisible, |
| showSearchModal, |
| refresh, |
| loading, |
| t, |
| }) => { |
| const ICON_BUTTON_CLASS = 'text-white hover:bg-opacity-80 !rounded-full'; |
|
|
| return ( |
| <div className='flex items-center justify-between mb-4'> |
| <h2 |
| className='text-2xl font-semibold text-gray-800 transition-opacity duration-1000 ease-in-out' |
| style={{ opacity: greetingVisible ? 1 : 0 }} |
| > |
| {getGreeting} |
| </h2> |
| <div className='flex gap-3'> |
| <Button |
| type='tertiary' |
| icon={<Search size={16} />} |
| onClick={showSearchModal} |
| className={`bg-green-500 hover:bg-green-600 ${ICON_BUTTON_CLASS}`} |
| /> |
| <Button |
| type='tertiary' |
| icon={<RefreshCw size={16} />} |
| onClick={refresh} |
| loading={loading} |
| className={`bg-blue-500 hover:bg-blue-600 ${ICON_BUTTON_CLASS}`} |
| /> |
| </div> |
| </div> |
| ); |
| }; |
|
|
| export default DashboardHeader; |
|
|