Add layout management with Zustand and integrate LayoutImage component
This commit is contained in:
37
app/src/store/builder/uselayoutStore.ts
Normal file
37
app/src/store/builder/uselayoutStore.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
type Layout = null | 'layout1' | 'layout2';
|
||||
|
||||
type LayoutState = {
|
||||
currentLayout: Layout;
|
||||
setLayout: (layout: Layout) => void;
|
||||
resetLayout: () => void;
|
||||
};
|
||||
|
||||
const LAYOUT_STORAGE_KEY = 'currentLayout';
|
||||
|
||||
const useLayoutStore = create<LayoutState>((set) => ({
|
||||
currentLayout: (() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY);
|
||||
return storedLayout ? (JSON.parse(storedLayout) as Layout) : null;
|
||||
}
|
||||
return null;
|
||||
})(),
|
||||
|
||||
setLayout: (layout) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout));
|
||||
}
|
||||
set({ currentLayout: layout });
|
||||
},
|
||||
|
||||
resetLayout: () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.removeItem(LAYOUT_STORAGE_KEY);
|
||||
}
|
||||
set({ currentLayout: null });
|
||||
},
|
||||
}));
|
||||
|
||||
export default useLayoutStore;
|
||||
Reference in New Issue
Block a user