maddy-admin/src/lib/components/AuthWrapper.tsx
2024-01-17 21:48:44 +01:00

46 lines
1.4 KiB
TypeScript

"use client";
import { Button, Flex, Heading, Text, Link } from "@radix-ui/themes";
import { Session } from "next-auth";
import { SessionProvider, signIn } from "next-auth/react";
import useThemePreference from "../hooks/useThemePreference";
export default function AuthWrapper({
children,
session,
}: {
children: React.ReactNode,
session: Session | null,
}) {
const darkTheme = useThemePreference();
if (session?.user) {
return (
<SessionProvider session={session}>
{children}
</SessionProvider>
);
} else {
return (
<>
<Flex direction='column' gap='4' m="4" align='center'>
<Heading size='8'>Unauthenticated</Heading>
<Button variant="outline" size='3' onClick={() => signIn()}>Sign in</Button>
</Flex>
<Flex justify="end" className="fixed bottom-0 w-full">
<Text className="opacity-50 p-4 pr-10" weight="light">
Background image by
<Link
highContrast
href={darkTheme
? "https://unsplash.com/photos/a-red-jelly-floating-in-the-dark-water-MBztcsAb9LU"
: "https://unsplash.com/photos/silhouette-of-mountain-at-daytime-jUCQRQeRs3k"}
>
{" "}{darkTheme ? "Vadym" : "Willian Justen de Vasconcellos"} on Unsplash
</Link>
</Text>
</Flex>
</>
);
}
}