59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
|
import { cloneElement } from 'react'
|
|||
|
|
import Logo from '@/components/template/Logo'
|
|||
|
|
import { APP_NAME } from '@/constants/app.constant'
|
|||
|
|
import type { CommonProps } from '@/proxy/common'
|
|||
|
|
import type { ReactNode, ReactElement } from 'react'
|
|||
|
|
import { Avatar } from '@/components/ui'
|
|||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|||
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
|||
|
|
|
|||
|
|
interface CoverProps extends CommonProps {
|
|||
|
|
content?: ReactNode
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Cover = ({ children, content, ...rest }: CoverProps) => {
|
|||
|
|
const { translate } = useLocalization()
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="grid lg:grid-cols-3 h-full">
|
|||
|
|
<div
|
|||
|
|
className="col-span-2 bg-no-repeat bg-cover py-6 px-16 flex-col justify-between dark:bg-gray-800 hidden lg:flex relative"
|
|||
|
|
style={{
|
|||
|
|
backgroundImage: `url('/img/others/auth-cover-bg.jpg')`,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Koyulaştırıcı katman */}
|
|||
|
|
<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
|
|||
|
|
|
|||
|
|
<div className="relative z-10 flex flex-col h-full justify-between">
|
|||
|
|
<Logo mode="dark" url={ROUTES_ENUM.authenticated.login} />
|
|||
|
|
<div>
|
|||
|
|
<div className="mb-6 flex items-center gap-4">
|
|||
|
|
<Avatar className="border-2 border-white" shape="circle" src="/img/others/cto.png" />
|
|||
|
|
<div className="text-white">
|
|||
|
|
<div className="font-semibold text-base">Sedat ÖZTÜRK</div>
|
|||
|
|
<span className="opacity-80">{translate('::LoginPanel.Profil')}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-lg text-white opacity-80">{translate('::LoginPanel.Message')}</p>
|
|||
|
|
</div>
|
|||
|
|
<span className="text-white">
|
|||
|
|
Copyright © {`${new Date().getFullYear()}`}{' '}
|
|||
|
|
<span className="font-semibold">{`${APP_NAME}`}</span>{' '}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col justify-center items-center bg-white dark:bg-gray-800">
|
|||
|
|
<div className="w-full xl:max-w-[450px] px-8 max-w-[380px]">
|
|||
|
|
<div className="mb-8">{content}</div>
|
|||
|
|
{children ? cloneElement(children as ReactElement, { ...rest }) : null}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default Cover
|