| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
|
|
| 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;
|
|
|