hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
35 lines
895 B
TypeScript
35 lines
895 B
TypeScript
import { create } from 'zustand';
|
|
import { persist } from 'zustand/middleware';
|
|
|
|
interface UiState {
|
|
sidebarOpen: boolean;
|
|
darkMode: boolean;
|
|
toggleSidebar: () => void;
|
|
setSidebarOpen: (open: boolean) => void;
|
|
toggleDarkMode: () => void;
|
|
}
|
|
|
|
export const useUiStore = create<UiState>()(
|
|
persist(
|
|
(set, get) => ({
|
|
sidebarOpen: true,
|
|
darkMode: false,
|
|
toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
|
|
setSidebarOpen: (open) => set({ sidebarOpen: open }),
|
|
toggleDarkMode: () => {
|
|
const next = !get().darkMode;
|
|
set({ darkMode: next });
|
|
document.documentElement.classList.toggle('dark', next);
|
|
},
|
|
}),
|
|
{
|
|
name: 'clinicpro-ui',
|
|
onRehydrateStorage: () => (state) => {
|
|
if (state?.darkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
},
|
|
},
|
|
),
|
|
);
|