Spaces:
Sleeping
Sleeping
File size: 4,478 Bytes
4d592a4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import React from 'react';
import { X, Sliders, Moon, Sun, Trash2, ExternalLink } from 'lucide-react';
import { useApp } from '../../context/AppContext';
export const SettingsModal: React.FC = () => {
const { state, dispatch, toggleTheme } = useApp();
if (!state.settingsOpen) return null;
const handleClose = () => {
dispatch({ type: 'TOGGLE_SETTINGS' });
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
onClick={handleClose}
/>
<div className="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md mx-4 animate-slide-up">
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center gap-2">
<Sliders className="w-5 h-5 text-gray-600 dark:text-gray-400" />
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
Settings
</h2>
</div>
<button
onClick={handleClose}
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
>
<X className="w-5 h-5 text-gray-500" />
</button>
</div>
<div className="p-4 space-y-6">
<div className="space-y-4">
<h3 className="text-sm font-medium text-gray-900 dark:text-white uppercase tracking-wide">
Appearance
</h3>
<button
onClick={toggleTheme}
className="w-full flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
>
<div className="flex items-center gap-3">
{state.theme === 'light' ? (
<Sun className="w-5 h-5 text-amber-500" />
) : (
<Moon className="w-5 h-5 text-blue-500" />
)}
<span className="text-sm font-medium text-gray-900 dark:text-white">
{state.theme === 'light' ? 'Light Mode' : 'Dark Mode'}
</span>
</div>
<span className="text-xs text-gray-500">
Toggle theme
</span>
</button>
</div>
<div className="space-y-4">
<h3 className="text-sm font-medium text-gray-900 dark:text-white uppercase tracking-wide">
API Configuration
</h3>
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<p className="text-xs text-blue-700 dark:text-blue-400">
API endpoints are configured via environment variables.
See the backend .env file for configuration.
</p>
</div>
</div>
<div className="space-y-4">
<h3 className="text-sm font-medium text-gray-900 dark:text-white uppercase tracking-wide">
Data Management
</h3>
<button
className="w-full flex items-center justify-between p-3 bg-red-50 dark:bg-red-900/20 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors"
onClick={() => {
if (confirm('Are you sure you want to clear all documents?')) {
// Implementation would go here
}
}}
>
<div className="flex items-center gap-3">
<Trash2 className="w-5 h-5 text-red-500" />
<span className="text-sm font-medium text-red-700 dark:text-red-400">
Clear All Documents
</span>
</div>
</button>
</div>
</div>
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between text-xs text-gray-500">
<span>RAG System v1.0.0</span>
<a
href="https://github.com/your-repo/rag-system"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 hover:text-primary-600 transition-colors"
>
<ExternalLink className="w-3 h-3" />
<span>View on GitHub</span>
</a>
</div>
</div>
</div>
</div>
);
};
|