feat: add Status and RagChat pages with corresponding components and styles
- Created StatusPage component with system stats, configuration, and indexed documents overview. - Added RagChatPage component for chat functionality. - Introduced global CSS styles for light and dark themes, including utility classes and animations. - Defined TypeScript types for compliance, documents, and themes. - Configured Tailwind CSS for dynamic theming and custom animations. - Set up TypeScript configuration for app and node environments. - Initialized Vite configuration for React project.
This commit is contained in:
35
src/components/common/ThemeToggle.tsx
Normal file
35
src/components/common/ThemeToggle.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
|
||||
export const ThemeToggle: React.FC = () => {
|
||||
const { isDark, toggleTheme, theme } = useTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 10,
|
||||
background: isDark ? theme.bgHover : theme.bgCard,
|
||||
border: `1px solid ${theme.border}`,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
>
|
||||
{isDark ? (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="4" fill={theme.accent}/>
|
||||
<path d="M12 2V4M12 20V22M4 12H2M22 12H20M6.34 6.34L4.93 4.93M19.07 19.07L17.66 17.66M6.34 17.66L4.93 19.07M19.07 4.93L17.66 6.34" stroke={theme.accent} strokeWidth="2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={theme.accent} stroke={theme.accent} strokeWidth="1"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user