Files
new-api/web/src/components/layout/HeaderBar/NewYearButton.js

60 lines
1.9 KiB
JavaScript
Raw Normal View History

🎛️ refactor: HeaderBar into modular components, add shared skeletons, and primary-colored nav hover Summary - Split HeaderBar into maintainable components and hooks - Centralized skeleton loading UI via a reusable SkeletonWrapper - Improved navigation UX with primary-colored hover indication - Preserved API surface and passed linters Why - Improve readability, reusability, and testability of the header - Remove duplicated skeleton logic across files - Provide clearer hover feedback consistent with the theme What’s changed - Components (web/src/components/layout/HeaderBar/) - New container: index.js - New UI components: HeaderLogo.js, Navigation.js, ActionButtons.js, UserArea.js, MobileMenuButton.js, NewYearButton.js, NotificationButton.js, ThemeToggle.js, LanguageSelector.js - New shared skeleton: SkeletonWrapper.js - Updated entry: HeaderBar.js now re-exports ./HeaderBar/index.js - Hooks (web/src/hooks/common/) - New: useHeaderBar.js (state and actions for header) - New: useNotifications.js (announcements state, unread calc, open/close) - New: useNavigation.js (main nav link config) - Skeleton refactor - Navigation.js: replaced inline skeletons with <SkeletonWrapper type="navigation" .../> - UserArea.js: replaced inline skeletons with <SkeletonWrapper type="userArea" .../> - HeaderLogo.js: replaced image/title skeletons with <SkeletonWrapper type="image"/>, <SkeletonWrapper type="title"/> - Navigation hover UX - Added primary-colored hover to nav items for clearer pointer feedback - Final hover style: hover:text-semi-color-primary (kept rounded + transition classes) Non-functional - No breaking API changes; HeaderBar usage stays the same - All modified files pass lint checks Notes for future work - SkeletonWrapper is extensible: add new cases (e.g., card) in one place - Components are small and test-friendly; unit tests can be added per component Affected files (key) - web/src/components/layout/HeaderBar.js - web/src/components/layout/HeaderBar/index.js - web/src/components/layout/HeaderBar/Navigation.js - web/src/components/layout/HeaderBar/UserArea.js - web/src/components/layout/HeaderBar/HeaderLogo.js - web/src/components/layout/HeaderBar/ActionButtons.js - web/src/components/layout/HeaderBar/MobileMenuButton.js - web/src/components/layout/HeaderBar/NewYearButton.js - web/src/components/layout/HeaderBar/NotificationButton.js - web/src/components/layout/HeaderBar/ThemeToggle.js - web/src/components/layout/HeaderBar/LanguageSelector.js - web/src/components/layout/HeaderBar/SkeletonWrapper.js - web/src/hooks/common/useHeaderBar.js - web/src/hooks/common/useNotifications.js - web/src/hooks/common/useNavigation.js
2025-08-18 03:20:56 +08:00
/*
Copyright (C) 2025 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
import { Button, Dropdown } from '@douyinfe/semi-ui';
import fireworks from 'react-fireworks';
const NewYearButton = ({ isNewYear }) => {
if (!isNewYear) {
return null;
}
const handleNewYearClick = () => {
fireworks.init('root', {});
fireworks.start();
setTimeout(() => {
fireworks.stop();
}, 3000);
};
return (
<Dropdown
position="bottomRight"
render={
<Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
<Dropdown.Item onClick={handleNewYearClick} className="!text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-gray-600">
Happy New Year!!! 🎉
</Dropdown.Item>
</Dropdown.Menu>
}
>
<Button
theme="borderless"
type="tertiary"
icon={<span className="text-xl">🎉</span>}
aria-label="New Year"
className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 rounded-full"
/>
</Dropdown>
);
};
export default NewYearButton;