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

fix: infinite loop redirect in embeds

Browse Source
This commit is contained in:
dvelo 2024-12-22 13:57:03 -06:00
parent cc4bf911cf
commit fad6c6f70a
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 { ThemeProvider } from "@/components/ThemeProvider";
import { useSearchParams } from "next/navigation";
import { ClerkThemeProvider } from "@/components/clerk/ClerkThemeProvider";
export default function RootLayout({
children,
@ -43,16 +44,14 @@ export default function RootLayout({
const searchParams = useSearchParams();
const search = searchParams?.get("theme") || "light";
return (
<html lang="en">
<body>
<ThemeProvider
attribute="class"
disableTransitionOnChange
forcedTheme={search}
>
<TooltipProvider>{children}</TooltipProvider>
</ThemeProvider>
</body>
</html>
<ClerkThemeProvider>
<ThemeProvider
attribute="class"
disableTransitionOnChange
forcedTheme={search}
>
<TooltipProvider>{children}</TooltipProvider>
</ThemeProvider>
</ClerkThemeProvider>
);
}

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

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