mirror of
https://github.com/handsomezhuzhu/AeroStart.git
synced 2026-02-20 20:10:15 +00:00
56dd6d8bf2
Implement a modern, customizable browser start page with comprehensive features: - Multi-theme support with 8 preset color schemes - Custom wallpaper system supporting images and videos with multiple fit modes - Integrated search functionality with 5 major search engines (Google, Baidu, Bing, DuckDuckGo, Bilibili) - Real-time clock component with 12/24 hour format options - Dynamic background blur effect during search for enhanced focus - Complete i18n system with English and Chinese language support - Responsive design with smooth animations and transitions - Local storage integration for persistent user preferences - Context menu system for quick settings access - Toast notification system for user feedback - Error boundary for robust error handling Tech Stack: - React 19 with TypeScript - Vite 6 for build tooling - Tailwind CSS for styling - Local storage for data persistence Project Structure: - Core components: Clock, SearchBox, SettingsModal, ThemeSettings, WallpaperManager - Utility modules: storage management, search suggestions - Context providers: Toast notifications, i18n - Type definitions and constants configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { XIcon } from './Icons';
|
|
import { UserSettings } from '../types';
|
|
import ThemeSettings from './ThemeSettings';
|
|
import WallpaperManager from './WallpaperManager';
|
|
import SearchEngineManager from './SearchEngineManager';
|
|
import { useTranslation } from '../i18n';
|
|
|
|
interface SettingsModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
settings: UserSettings;
|
|
onUpdateSettings: (newSettings: UserSettings) => void;
|
|
}
|
|
|
|
const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, settings, onUpdateSettings }) => {
|
|
const { t } = useTranslation();
|
|
|
|
if (!isOpen) return null;
|
|
|
|
// Handler to block right-click context menu within the settings modal
|
|
const handleContextMenu = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
onContextMenu={handleContextMenu}
|
|
>
|
|
{/* Background overlay */}
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal content */}
|
|
<div className="
|
|
relative w-full max-w-md rounded-3xl
|
|
bg-[#1a1a1a]/90 backdrop-blur-xl
|
|
border border-white/10
|
|
shadow-[0_20px_50px_rgba(0,0,0,0.5)]
|
|
text-white animate-in fade-in zoom-in-95 duration-200
|
|
max-h-[85vh] flex flex-col overflow-hidden
|
|
">
|
|
{/* Header - fixed */}
|
|
<div className="flex items-center justify-between px-6 pt-6 pb-4 shrink-0 z-10">
|
|
<h2 className="text-2xl font-light tracking-wide">{t.settings}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 rounded-full hover:bg-white/10 transition-colors text-white/70 hover:text-white"
|
|
>
|
|
<XIcon className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Scrollable area */}
|
|
<div className="flex-1 overflow-y-auto px-6 pb-6 custom-scrollbar">
|
|
<div className="space-y-8">
|
|
|
|
{/* Appearance settings section */}
|
|
<div className="space-y-6">
|
|
<h3 className="text-sm font-semibold text-white/40 uppercase tracking-wider">{t.appearance}</h3>
|
|
|
|
{/* Theme settings component */}
|
|
<ThemeSettings settings={settings} onUpdateSettings={onUpdateSettings} />
|
|
|
|
{/* Wallpaper manager component */}
|
|
<WallpaperManager settings={settings} onUpdateSettings={onUpdateSettings} />
|
|
</div>
|
|
|
|
<div className="h-[1px] bg-white/10 w-full" />
|
|
|
|
{/* Search engine manager component */}
|
|
<SearchEngineManager settings={settings} onUpdateSettings={onUpdateSettings} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SettingsModal;
|