diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0aff803..9cf4fc1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,51 +3,34 @@ import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -import { useEffect, useState } from "react"; -import * as rdd from "react-device-detect"; -import { useRouter } from "next/navigation"; - +import { DeviceProvider } from "@/lib/context/DeviceContext"; import MobileNav from "@/lib/components/MobileNav"; const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], + variable: "--font-geist-sans", + subsets: ["latin"], }); const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], + variable: "--font-geist-mono", + subsets: ["latin"], }); export default function RootLayout({ - children, + children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode; }>) { - const router = useRouter(); - - const [isSafari, setIsSafari] = useState(false); - const [isMobile, setIsMobile] = useState(false); - - useEffect(() => { - setIsSafari(rdd.isSafari); - setIsMobile(rdd.isMobile); - }, []); - - useEffect(() => { - }, [isMobile, isSafari, router]); - - return ( - - - {children} - {isMobile && ( - - )} - - - ); + return ( + + + + {children} + + + + ); } diff --git a/src/lib/context/DeviceContext.tsx b/src/lib/context/DeviceContext.tsx new file mode 100644 index 0000000..89a50b7 --- /dev/null +++ b/src/lib/context/DeviceContext.tsx @@ -0,0 +1,35 @@ +"use client"; + +import React, { createContext, useContext, useEffect, useState } from "react"; +import * as rdd from "react-device-detect"; + +interface DeviceContextProps { + isSafari: boolean; + isMobile: boolean; +} + +const DeviceContext = createContext(undefined); + +export const DeviceProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [isSafari, setIsSafari] = useState(false); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + setIsSafari(rdd.isSafari); + setIsMobile(rdd.isMobile); + }, []); + + return ( + + {children} + + ); +}; + +export const useDevice = (): DeviceContextProps => { + const context = useContext(DeviceContext); + if (!context) { + throw new Error("useDevice must be used within a DeviceProvider"); + } + return context; +}; \ No newline at end of file