Hackathons/Bitcamp-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Device Context

Browse Source
This commit is contained in:
GamerBoss101
2025-04-12 14:52:18 -04:00
parent 9514b1be33
commit 83486927e0
2 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/layout.tsx
View File

@@ -3,51 +3,34 @@
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { useEffect, useState } from "react"; import { DeviceProvider } from "@/lib/context/DeviceContext";
import * as rdd from "react-device-detect";
import { useRouter } from "next/navigation";
import MobileNav from "@/lib/components/MobileNav"; import MobileNav from "@/lib/components/MobileNav";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
}); });
const geistMono = Geist_Mono({ const geistMono = Geist_Mono({
variable: "--font-geist-mono", variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
}); });
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const router = useRouter(); return (
<html data-theme="drinky" lang="en">
const [isSafari, setIsSafari] = useState<boolean>(false); <body
const [isMobile, setIsMobile] = useState<boolean>(false); className={`${geistSans.variable} ${geistMono.variable} antialiased`}
suppressHydrationWarning={true}
useEffect(() => { >
setIsSafari(rdd.isSafari); <DeviceProvider>
setIsMobile(rdd.isMobile); {children}
}, []); </DeviceProvider>
</body>
useEffect(() => { </html>
}, [isMobile, isSafari, router]); );
return (
<html data-theme="drinky" lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
suppressHydrationWarning={true}
>
{children}
{isMobile && (
<MobileNav />
)}
</body>
</html>
);
} }

35
src/lib/context/DeviceContext.tsx Normal file
View File

@@ -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<DeviceContextProps | undefined>(undefined);
export const DeviceProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [isSafari, setIsSafari] = useState<boolean>(false);
const [isMobile, setIsMobile] = useState<boolean>(false);
useEffect(() => {
setIsSafari(rdd.isSafari);
setIsMobile(rdd.isMobile);
}, []);
return (
<DeviceContext.Provider value={{ isSafari, isMobile }}>
{children}
</DeviceContext.Provider>
);
};
export const useDevice = (): DeviceContextProps => {
const context = useContext(DeviceContext);
if (!context) {
throw new Error("useDevice must be used within a DeviceProvider");
}
return context;
};