konnosDashboard
APIAuthorizationLayout.tsx57 lines · main
1import { useTheme } from 'next-themes'
2import Image from 'next/legacy/image'
3import Link from 'next/link'
4import type { PropsWithChildren } from 'react'
5import { Separator } from 'ui'
6
7import { Head, type HeadProvider } from '@/components/ui/Head'
8import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
9import { BASE_PATH } from '@/lib/constants'
10
11export interface APIAuthorizationLayoutProps {
12 HeadProvider: HeadProvider
13}
14
15export const APIAuthorizationLayout = ({
16 HeadProvider,
17 children,
18}: PropsWithChildren<APIAuthorizationLayoutProps>) => {
19 const { resolvedTheme } = useTheme()
20 const { appTitle } = useCustomContent(['app:title'])
21
22 return (
23 <>
24 <Head
25 HeadProvider={HeadProvider}
26 title={`Authorize API access | ${appTitle || 'Briven'}`}
27 />
28 <main className="h-screen flex flex-col w-full h-full overflow-y-auto">
29 <div>
30 <div className="mx-auto px-4 sm:px-6">
31 <div className="max-w-xl flex justify-between items-center mx-auto py-4">
32 <div className="flex justify-start lg:w-0 lg:flex-1 items-center">
33 <Link href="/" className="inline-flex items-center leading-none">
34 <span className="sr-only">Briven</span>
35 <Image
36 src={
37 resolvedTheme?.includes('dark')
38 ? `${BASE_PATH}/img/briven-dark.svg`
39 : `${BASE_PATH}/img/briven-light.svg`
40 }
41 alt="Briven Logo"
42 height={20}
43 width={105}
44 />
45 </Link>
46 </div>
47 </div>
48 </div>
49 </div>
50 <Separator />
51 <div className="flex flex-col justify-center grow mx-auto w-[90vw] max-w-[600px] space-y-4">
52 {children}
53 </div>
54 </main>
55 </>
56 )
57}