57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { cloneElement } from 'react'
|
||
import Logo from '@/components/template/Logo'
|
||
import { APP_NAME } from '@/constants/app.constant'
|
||
import type { CommonProps } from '@/@types/common'
|
||
import type { ReactNode, ReactElement } from 'react'
|
||
import { Avatar } from '@/components/ui'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
||
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" />
|
||
<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
|