ForgotPasswordLayout.tsx71 lines · main

1	import { useTheme } from 'next-themes'
2	import Image from 'next/legacy/image'
3	import Link from 'next/link'
4	import { PropsWithChildren } from 'react'
5	import { cn } from 'ui'
6
7	import { BASE_PATH } from '@/lib/constants'
8
9	type ForgotPasswordLayoutProps = {
10	heading?: string
11	subheading?: string
12	logoLinkToMarketingSite?: boolean
13	showHeadings?: boolean
14	className?: string
15	}
16
17	const ForgotPasswordLayout = ({
18	heading,
19	subheading,
20	logoLinkToMarketingSite = false,
21	showHeadings = true,
22	className,
23	children,
24	}: PropsWithChildren<ForgotPasswordLayoutProps>) => {
25	const { resolvedTheme } = useTheme()
26
27	return (
28	<div
29	className={cn(
30	'min-h-screen flex-1 bg-studio flex flex-col gap-8 lg:gap-16 xl:gap-32',
31	className
32	)}
33	>
34	<div className="sticky top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
35	<nav className="relative flex items-center justify-between sm:h-10">
36	<div className="flex shrink-0 grow items-center lg:grow-0">
37	<div className="flex w-full items-center justify-between md:w-auto">
38	<Link href={logoLinkToMarketingSite ? 'https://supabase.com' : '/organizations'}>
39	<Image
40	src={
41	resolvedTheme?.includes('dark')
42	? `${BASE_PATH}/img/briven-dark.svg`
43	: `${BASE_PATH}/img/briven-light.svg`
44	}
45	alt=""
46	height={24}
47	width={120}
48	/>
49	</Link>
50	</div>
51	</div>
52	</nav>
53	</div>
54
55	<div className="flex flex-col justify-center items-center">
56	<main className="max-w-[448px] w-full flex flex-col px-5">
57	{showHeadings && (
58	<div className="mb-6">
59	<h1 className="lg:text-3xl mt-8 mb-2">{heading}</h1>
60	<h2 className="text-foreground-light text-sm">{subheading}</h2>
61	</div>
62	)}
63
64	{children}
65	</main>
66	</div>
67	</div>
68	)
69	}
70
71	export default ForgotPasswordLayout