feat: implement skeleton layout for settings and search pages (#366)

Co-authored-by: Lê Nhân Phụng <lenhanphung@Phung-Mac-M4.local>

src/components/Calendar/CalendarLayout.tsx

@@ -7,12 +7,16 @@ import { useAppSelector } from "../../app/hooks";
 import { refreshCalendars } from "../Event/utils/eventUtils";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 
+import SettingsPage from "../../features/Settings/SettingsPage";
+import SearchResultsPage from "../../features/Search/SearchResultsPage";
+
 export default function CalendarLayout() {
   const calendarRef = useRef<any>(null);
   const dispatch = useAppDispatch();
   const error = useAppSelector((state) => state.calendars.error);
   const selectedCalendars = useAppSelector((state) => state.calendars.list);
   const tempcalendars = useAppSelector((state) => state.calendars.templist);
+  const view = useAppSelector((state) => state.settings.view);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [currentView, setCurrentView] = useState<string>("timeGridWeek");
 
@@ -59,11 +63,15 @@ export default function CalendarLayout() {
   return (
     <div className="App">
       <Menubar {...menubarProps} />
-      <CalendarApp
-        calendarRef={calendarRef}
-        onDateChange={handleDateChange}
-        onViewChange={handleViewChange}
-      />
+      {view === "calendar" && (
+        <CalendarApp
+          calendarRef={calendarRef}
+          onDateChange={handleDateChange}
+          onViewChange={handleViewChange}
+        />
+      )}
+      {view === "settings" && <SettingsPage />}
+      {view === "search" && <SearchResultsPage />}
       <ErrorSnackbar error={error} type="calendar" />
     </div>
   );