postiz/apps/frontend/src/app/auth/layout.tsx

56 lines
2.1 KiB
TypeScript

import { isGeneral } from '@gitroom/react/helpers/is.general';
export const dynamic = 'force-dynamic';
import { ReactNode } from 'react';
import Image from 'next/image';
import clsx from 'clsx';
export default async function AuthLayout({
children,
}: {
children: ReactNode;
}) {
return (
<>
<div className="absolute left-0 top-0 z-[0] h-[100vh] w-[100vw] overflow-hidden bg-loginBg bg-contain bg-no-repeat bg-left-top" />
<div className="relative z-[1] pr-[100px] flex justify-end items-center h-[100vh] w-[100vw] overflow-hidden">
<div className="w-[557px] flex h-[614px] bg-loginBox bg-contain">
<div className="w-full relative">
<div className="absolute -top-[100px] text-white justify-center items-center w-full flex gap-[10px]">
<Image
src={isGeneral() ? '/postiz.svg' : '/logo.svg'}
width={55}
height={53}
alt="Logo"
/>
<div
className={clsx(!isGeneral() ? 'mt-[12px]' : 'min-w-[80px]')}
>
{isGeneral() ? (
<img src="/postiz-text.svg" className="w-[80px]" />
) : (
<div className="text-[40px]">Gitroom</div>
)}
</div>
</div>
</div>
<div className="p-[32px] absolute w-[557px] h-[614px] text-white">
{children}
</div>
<div className="flex flex-1 flex-col">
<div className="flex-1 flex justify-end">
<div className="absolute top-0 bg-gradient-to-t from-[#354258] w-[1px] translate-x-[22px] h-full" />
</div>
<div>
<div className="absolute right-0 bg-gradient-to-l from-[#354258] h-[1px] translate-y-[22px] w-full" />
</div>
</div>
<div className="absolute top-0 bg-gradient-to-t from-[#354258] w-[1px] -translate-x-[22px] h-full" />
<div className="absolute right-0 bg-gradient-to-l from-[#354258] h-[1px] -translate-y-[22px] w-full" />
</div>
</div>
</>
);
}