dvelo/mhsf-dev
1
0
Fork 0
mirror of https://github.com/DeveloLongScript/MHSF.git synced 2026-05-07 16:44:59 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: infinite loop redirect in embeds

Browse Source 
fix: infinite loop redirect in embeds
This commit is contained in:
dvelo 2024-12-22 14:15:56 -06:00 committed by GitHub
commit daf8b2015f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/(embeds)/layout.tsx
View File

@ -34,6 +34,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
import "../globals.css"; import "../globals.css";
import { ThemeProvider } from "@/components/ThemeProvider"; import { ThemeProvider } from "@/components/ThemeProvider";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { ClerkThemeProvider } from "@/components/clerk/ClerkThemeProvider";
export default function RootLayout({ export default function RootLayout({
children, children,
@ -43,16 +44,14 @@ export default function RootLayout({
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const search = searchParams?.get("theme") || "light"; const search = searchParams?.get("theme") || "light";
return ( return (
<html lang="en"> <ClerkThemeProvider>
<body> <ThemeProvider
<ThemeProvider attribute="class"
attribute="class" disableTransitionOnChange
disableTransitionOnChange forcedTheme={search}
forcedTheme={search} >
> <TooltipProvider>{children}</TooltipProvider>
<TooltipProvider>{children}</TooltipProvider> </ThemeProvider>
</ThemeProvider> </ClerkThemeProvider>
</body>
</html>
); );
} }

64
src/components/clerk/ClerkThemeProvider.tsx
View File

@ -36,44 +36,44 @@ import { type ReactNode, useEffect, useState } from "react";
import { ThemeProvider } from "../ThemeProvider"; import { ThemeProvider } from "../ThemeProvider";
export function ClerkThemeProvider({ export function ClerkThemeProvider({
children, children,
className, className,
}: { }: {
children: ReactNode | ReactNode[]; children?: ReactNode | ReactNode[];
className: string | undefined; className?: string | undefined;
}) { }) {
const [theme, setTheme] = useState<string | undefined>(""); const [theme, setTheme] = useState<string | undefined>("");
return ( return (
<ClerkProvider <ClerkProvider
appearance={{ baseTheme: theme == "dark" ? dark : undefined }} appearance={{ baseTheme: theme == "dark" ? dark : undefined }}
> >
<html lang="en" className={className}> <html lang="en" className={className}>
<body> <body>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
{children} {children}
{/** This *has* to be implemented in component form for the `useTheme` to load at the appropriate time. */} {/** This *has* to be implemented in component form for the `useTheme` to load at the appropriate time. */}
<ThemeElement setTheme={setTheme} /> <ThemeElement setTheme={setTheme} />
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>
</ClerkProvider> </ClerkProvider>
); );
} }
function ThemeElement({ function ThemeElement({
setTheme, setTheme,
}: { }: {
setTheme: (update: string | undefined) => void; setTheme: (update: string | undefined) => void;
}) { }) {
const theme = useTheme(); const theme = useTheme();
useEffect(() => { useEffect(() => {
setTheme(theme.resolvedTheme); setTheme(theme.resolvedTheme);
}, [theme.resolvedTheme, setTheme]); }, [theme.resolvedTheme, setTheme]);
return <></>; return <></>;
} }