mirror of https://github.com/boxyhq/jackson.git
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import React from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import InvalidSetupLinkAlert from '@components/setup-link/InvalidSetupLinkAlert';
|
|
import { Loading } from '@boxyhq/internal-ui';
|
|
import useSetupLink from '@lib/ui/hooks/useSetupLink';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { hexToOklch } from '@lib/color';
|
|
import { PoweredBy } from '@components/PoweredBy';
|
|
|
|
export const SetupLinkLayout = ({ children }: { children: React.ReactNode }) => {
|
|
const router = useRouter();
|
|
const { t } = useTranslation('common');
|
|
|
|
const { token } = router.query as { token: string };
|
|
|
|
const { setupLink, error, isLoading } = useSetupLink(token);
|
|
|
|
if (isLoading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
const titles = {
|
|
sso: t('configure_sso'),
|
|
dsync: t('configure_dsync'),
|
|
};
|
|
|
|
const title = setupLink?.service ? titles[setupLink?.service] : '';
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{`${title} - ${setupLink?.companyName}`}</title>
|
|
{setupLink?.faviconUrl && <link rel='icon' href={setupLink.faviconUrl} />}
|
|
</Head>
|
|
|
|
{setupLink?.primaryColor && <style>{`:root { --p: ${hexToOklch(setupLink.primaryColor)}; }`}</style>}
|
|
|
|
<div className='mx-auto max-w-3xl'>
|
|
<div className='flex flex-1 flex-col'>
|
|
<div className='top-0 flex h-16 flex-shrink-0 border-b'>
|
|
<div className='flex flex-shrink-0 items-center gap-4'>
|
|
<Link href={`/setup/${token}`}>
|
|
{setupLink?.logoUrl && (
|
|
<img src={setupLink.logoUrl} alt={setupLink.companyName || ''} className='max-h-10' />
|
|
)}
|
|
</Link>
|
|
<span className='text-xl font-bold tracking-wide text-gray-900'>{title}</span>
|
|
</div>
|
|
</div>
|
|
<main>
|
|
<div className='py-6'>
|
|
{error && <InvalidSetupLinkAlert message={error.message} />}
|
|
{setupLink && children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<PoweredBy />
|
|
</>
|
|
);
|
|
};
|